Erste jQuery-Plugin Ausgaben

Question

Hey Leute, zuerst lass mich einfach sagen, ich bin ein jQuery noob! Ich möchte ein einfaches Plugin machen, das ein HTML-select-Element automatisch auffüllt, es funktioniert gut auf dem ersten Element, aber wenn ich es erneut anrufe, um eine Sekunde zu füllen, fügt es nichts hinzu. Hier sind meine Anrufe in der Ajax-Tab wo #product und # new-Kategorie sind die ausgewählten Elemente:

$(function(){ 

    $("#product").popSelect("products"); 

    $("#new-category").popSelect("categories"); 

}); 

HTML:

><select id="product" name="product"> 
>  < option value="">Select Product</option>     
></select >  
><select id="new-category" name="new-category"> 
>  < option value="">Select Category< /option>     
></select > 

Und hier ist das Plugin:

(function(jQuery){ 
jQuery.fn.popSelect = function(table) { 

    return jQuery(this).each(function(){    

     var obj = jQuery(this); 

     if(this.nodeName.toLowerCase() == 'select'){ 
      jQuery.getJSON("../app/modules/ajax/json.php", { table:table }, 
       function(data){     
        var options = '';   
        jQuery.each(data, function(i,item){           
         options += '<option value="' + item.id + '">' + item.title + '</option>';     
        });     
        obj.append(options);     
       });  
     }; 
    }); 
}; 
})(jQuery); 

Seltsamerweise, wenn ich den zweiten Funktionsaufruf $("#new-category").popSelect("categories"); zu $("[id^='new-category']").popSelect("categories"); ändere, dann funktioniert es gut, gibt es Som stimmt etwas nicht mit meinem Selektor?

Danke für jede Hilfe!

Answer 1

Ich habe gerade eine ähnliche Frage beantwortet, im Grunde you can't have two elements with the same ID on the same page, es verursacht dieses genaue Problem. Sie müssen eine Klasse verwenden oder eine der IDs ändern.

Answer 2

Ich habe keine direkte Antwort, aber es sieht so aus, als ob Sie 2 aktive Ajax-Anrufe im Wesentlichen gleichzeitig haben, was zu etwas Fremdheit führen könnte?

Answer 3

Ok so etwas wie das?

Ich bekomme keine Fehler, aber es füllt nur die erste select, selbe Antwort in IE. Puzzling, sogar eine "Warte" -Funktion zwischen den Anrufen hinzufügen und es hat nichts getan. Hat das ID-Tag == Name Tag ok? Etwas, das ich gerade bemerkt habe, indem ich "id = 'new-category'" durch "id = 'newwcategory'" ersetzt habe, funktioniert es !? stimmt etwas mit "-" in Ids nicht?

Nochmals vielen Dank für die Hilfe bis jetzt!

Answer 4

Ok Ich habe seither festgestellt, dass dies ein Problem mit jQuery UI Tabs ist, da das Plugin ohne sie perfekt funktioniert!Elemente in den aktuell ausgewählten Registerkarte arent aufgefüllt, wenn die zuvor ausgewählten Registerkarte ein Element des gleichen id zB haben:

erste Reiter:

< select id = "new_category" name = "new_category" > < option value = ""> Kategorie wählen

Zweite Tab:

< select id = "Produkt" name = "Produkt"> < option value = ""> Produkt auswählen </option> </select>

< select id = "new_category" name = "new_category "> < option value =" "> Kategorie wählen </option> </select>

Thrid Tab:

< select id = "Produkt" name = "Produkt"> < option value = ""> Produkt auswählen </option> </select>

von Tab 1 bis Tab geht 2 - Produkt wird bevölkert, aber nicht new_category und geht von Tab 2 Tab 3 - Produkt nicht ausgefüllt werden ...

das heißt, wenn ein Element mit einer ID entspricht eine vorherige Registerkarte besteht in den aktuellen Tab, es wird nicht ausgefüllt und (evtl. ly?) Die vorherige Registerkarte Element wird sein, obwohl ich nicht sehen kann, da es nicht geladen ist. Ive versuchte fiedeln mit Cache, aber es hilft nicht, Angabe der Formular-ID als Elternteil sollte dies beheben, aber warum ist es notwendig, sollten nicht die Tabs unabhängig sein?

Vielen Dank für weitere Informationen!