jQuery, Ajax: HTML kann nicht ersetzt werden

Es gibt eine Schaltfläche auf einer Webseite. Wenn Sie darauf klicken, wird der Absatz (<p>) durch den Header (<h1>) ersetzt.jQuery, Ajax: HTML kann nicht ersetzt werden

Allerdings kann ich nicht scheinen, es funktionierte zu machen:

index.html

<head> 
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script> 
    <script src="js/libs/jquery/jquery.js"></script> 
    <script src="js/libs/jqueryui/jquery-ui.js"></script> 
    <script src="js/main.js"></script> 
</head> 
<body> 
    <section> 
     <p id="replaceableP1">This text will be replaced </p> 
     <button id="myButton">Get External Data</button>    
    </section> 
</body>

main.js

$(document).ready(function(){ 

     $("#myButton").click(function(){    
      $.get("someInfo.html", function (data, status){ 
        if (status === "success"){ 
         $('#replaceableP1').html(data); 
        } else { 
         $("#replaceableP1").html("Problem reading data"); 
        } 

       }); 
     }); 
});

someInfo.html

<h1>This is external data!</h1>

Der Fehler erzeugt auf: $('#replaceableP1').html(data); in den main.js

Wenn I data mit "displayText" ersetzen, wird es Element index.html und displaytext ersetzen.

Wenn ich someInfo.html aus dem Verzeichnis zu entfernen, wird die Webseite nicht einmal Fehlermeldung erzeugen: Problem Lesen von Daten.

Was ist falsch an dem Code?

EDIT: Meine schlecht, ich habe vergessen, es gibt $("#myButton").click(function(){

Quelle

2016-05-09 user2789240

Nun, für Anfänger haben Sie eine zu viele schließende Klammern/Klammern. Entferne das letzte '});' und sieh nach, ob es besser funktioniert. – amdouglas

Nun, es gibt kein Klickereignis, also nicht sicher, wie die Schaltfläche den Inhalt ersetzt. – epascarello

Die AJAX-Anforderung wird ausgeführt, sobald die Seite geladen wird, d. H. '$ (Document) .ready '. Das funktioniert: https://jsbin.com/gucawus/ – amdouglas

Es gibt zwei Dinge, die ich sehe. Der erste ist, dass Sie ein extra "}) haben;" in deiner main.js-Datei. Die zweite ist, dass .html das innere HTML des ausgewählten Elements ersetzt. Wenn Sie die <p> durch die <h1> ersetzen möchten, verwenden Sie .replaceWith.

Zum Beispiel

$(document).ready(function() { 

    $.get("someInfo.html", function(data, status) { 
     if (status === "success") { 
      $('#replaceableP1').replaceWith(data); 
     } else { 
      $("#replaceableP1").html("Problem reading data"); 
     } 

     }); 
    });

Quelle

2016-05-09 15:27:03 WonderGrub

Still-Fehler: 'Type Fehler: Kontext ist null' Dann zeigt es auf jquery.js, sowie die Zeile mit' $ ('# replaceableP1'). ReplaceWith (Daten); ' – user2789240

Hmmm. Möglicherweise gibt es einen anderen Code, der ein Problem verursacht. Hier ist ein Plunker Link mit dem Arbeitscode ... https://plnkr.co/edit/pgdwZM4t8LnDSkAjoGa4?p=preview – WonderGrub

Ich stimme dir zu. Ich denke, etwas anderes in meinem Code ist falsch. Wie auch immer, danke für das Beantworten meiner Frage :) Ich werde versuchen, die ganze Seite neu zu erstellen, um zu sehen, ob ich herausfinden kann, was falsch ist. – user2789240

$(document).ready(function(){ 
    $('#myButton').click(function(){ 
    $.get("Info.html", function (data, status){ 
      if (status ==="success"){ 
       $('#replaceableP1').html(data); 
      } else { 
       $("#replaceableP1").html("Problem reading data"); 
      } 

      }); 
    }); 
    });

versuchen, diese und überprüfen, ob js Dateien geladen sind oder nicht.

Quelle

2016-05-09 15:50:47

jQuery, Ajax: HTML kann nicht ersetzt werden

Antwort

Verwandte Themen