Erste jQuery-Plugin Probleme

Question

Hey Jungs, zuerst weg von mir lassen nur sagen, ich bin ein jQuery Noob! Ich möchte ein einfaches Plugin machen, die Auto-auffüllt ein HTML-select-Element, funktioniert es auf dem ersten Element in Ordnung, aber wenn ich es wieder rufen eine zweite aufzufüllen es anhängt nichts. Hier sind meine Anrufe in dem 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);

Seltsam, wenn ich den zweiten Funktionsaufruf ändern $("#new-category").popSelect("categories"); zu $("[id^='new-category']").popSelect("categories"); es dann funktioniert gut, es ist etwas falsch mit meinen Wählern?

Vielen Dank für jede Hilfe!

Answer 1

Ich antwortete nur eine ähnliche Frage, im Grunde Sie nicht zwei Elemente haben mit der gleichen ID auf der gleichen Seite , verursacht es genau dieses Problem. Sie werden eine Klasse verwenden oder eine der IDs ändern.

Answer 2

Ich habe nicht eine direkte Antwort haben, aber es sieht aus wie Sie zwei aktive Ajax-Aufrufe im wesentlichen gleichen Zeit, die bis zu einem gewissen Fremdheit führen könnte?

herausragende haben

Answer 3

Ok, so etwas wie das?

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

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

        var obj = $(this);  

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

Ich bekomme keine Fehler, aber es immer noch füllt nur die erste Auswahl, gleiche Antwort im Internet Explorer. Rätselhaft, fügen Sie auch eine „wait“ Funktion zwischendurch Anrufe und es tat nichts. Ist mit dem ID-Tag == Namensschild ok? Etwas, das ich gerade bemerkt, „id =‚new-Kategorie‘“ mit „id =‚newwcategory‘“ ersetzt macht es Arbeit !? ther somthing falsch ist "-" 's in ids

Nochmals vielen Dank für all die Hilfe so weit!

Answer 4

Ich habe seitdem festgestellt, dass dies ein Problem mit jQuery UI Tabs, da das Plugin perfekt, ohne sie funktioniert! Elemente in den aktuell ausgewählten Registerkarte werden nicht aufgefüllt, wenn die zuvor ausgewählten Registerkarte ein Element derselben hatten Ich würde. Beispiel:

erstes Register:

<select id="new_category" name="new_category">

     <option value="">Select Category</option>
</select>

Zweiter Tab:

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

<select id="new_category" name="new_category">
      <option value="">Select Category</option>
</select>

Third Tab:

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

Wenn man von Tab 1 bis Tab 2 - Produkt gefüllt werden, aber nicht neue Kategorie und gehen von Tab 2 Tab 3 - Produkt nicht ausgefüllt werden ...

d. wenn ein Element mit einer ID entspricht ein vorheriges Register existiert in dem aktuelle Tab, wird es nicht aufgefüllt und (möglicherweise?) wird, um die vorherigen Registerkarte Element wird sein, obwohl ich das nicht sehen kann, da es nicht geladen wird. Ich habe mit Cache versucht, das Hantieren aber die Form-ID nicht hilft, die Angabe als seine Eltern sollten dieses Problem zu beheben, aber warum ist es notwendig, sollten die Tabs nicht unabhängig sein?