Json viel Laden über Ajax auf den zweiten Klick

Question

Ich bin ein Neuling, um jQuery und Ajax. Ich erstelle eine App, bei der verschiedene Inhalte aus derselben json-Datei geladen werden, abhängig von der angeklickten Navigationsoption.

Dies ist mein Code:

$(document).ready(function(){ 

    var $wrapper = $(".wrapper"); 
    $(document).on("click", ".navLink", loadRecipes); 
    function loadRecipes(){ 

     var type = $(this).attr("href"); 
     $.ajax({ 

      type: "GET", 
      url: "recipes.json", 
      cache: false, 
      success: function(data){ 
      for(var i = 0; i < data.recipes.length; i++){ 

       var recipe = data.recipes[i]; 
       if(type == recipe.type){ 

        var name = "<h3 class='recipeTitle'>" + recipe.name + "</h3>"; 
        $wrapper.append(name); 

       } 

      } 

     }); 
     return false; 

    } 

}) 

Und die json sieht ungefähr so ​​aus:

{ 
"recipes":[ 
{"name": "A", "type":"type1"}, 
{"name": "B", "type":"type2"}, 
{"name": "C", "type":"type2"}, 
{"name": "C", "type":"type1"} 
] 
} 

Das Attribut href entspricht das type-Attribut in der JSON-Datei. So werden bestimmte Elemente des JSON geladen, wenn auf einen bestimmten Link geklickt wird. Wenn ich zum ersten Mal auf einen der Links klicke, wird der entsprechende Inhalt geladen. Wenn ich versuche, auf einen anderen Link zu klicken, wird das Click-Ereignis ausgelöst, aber der JSON-Inhalt wird nicht geladen. Ich habe die Ereignisdelegierung für das Click-Ereignis eingeführt, aber es hat nicht geholfen. Ich dachte, es könnte ein Problem mit dem Caching sein, so habe ich den Cache hinzugefügt: false Parameter, aber es hat auch nicht geholfen. Wenn mir jemand einen Hinweis geben kann, was ich vermisse, würde ich das schätzen.

Answer 1

Sie nehmen den gleichen Inhalt aus dem gleichen Link, warum Ajax nicht zweimal geladen. Vielleicht wird geeignet sein für Sie so etwas wie dieses:

$(document).ready(function(){ 

var $wrapper = $(".wrapper"); 
$(document).on("click", ".navLink", loadRecipes); 
function loadRecipes(){ 

    var type = $(this).attr("href"); 
    $.ajax({ 

     type: "GET", 
     url: "recipes.json?type=" + type, 
     dataType: "JSON", 
     cache: false, 
     success: function(data){ 
      var recipe = data; 
      var name = "<h3 class='recipeTitle'>" + recipe.name + "</h3>"; 
       $wrapper.append(name); 

     } 

    }); 
    return false; 

} 

})

ändern Server Antwort hängt Variable eingeben. Die Antwort wird nur Sie Daten benötigen:

{"name": "B", "type":"type2"} 

Oder Sie können Ajax auf jeden Fall nur einmal festgelegt, alle Arten zu erhalten und auf Klick anhängen es nur Wrapper.

Answer 2

Indira, vielen Dank für Ihre Hilfe. Ich habe versucht, Ihre Lösung zu verwenden, aber es hat nicht funktioniert. Wie auch immer du geschrieben hast "Du nimmst denselben Inhalt vom selben Link", dachte ich - ich hatte versucht, verschiedene Datentypen in separate JSON-Dateien zu trennen, aber das funktionierte immer noch nicht. Mir war jedoch aufgefallen, dass auf der Registerkarte Netzwerk in den Entwicklertools beim Anklicken der Links die entsprechenden Dateien geladen wurden. Eigentlich war das HTML, das ich in den $ (". Wrapper") geladen habe, viel komplizierter - ich hatte es vereinfacht, weil es nicht relevant war, als ich mein Problem erklärte. Die resultierenden Elemente nahmen viel mehr Platz auf der Seite ein. Und ich fühle mich ein bisschen albern, aber ich habe dann bemerkt, dass der neue Inhalt tatsächlich geladen wurde, aber ganz unten auf der Seite blieb der alte Inhalt oben. Die Lösung des Problems besteht darin, einfach den $ (". Wrapper") am Anfang der Erfolgs-Response-Funktion zu leeren.