Primi problemi con il plugin jQuery

Question

Ehi ragazzi, prima di tutto lasciatemi dire che sono un job Noob! Voglio creare un semplice plugin che popola automaticamente un elemento html select, funziona bene sul primo elemento ma quando lo chiamo di nuovo per popolare un secondo non aggiunge nulla. Ecco le mie chiamate nella scheda Ajax in cui #product e # new-category sono gli elementi selezionati:

$(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 >

Ed ecco il 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);

Stranamente se cambio la seconda chiamata di funzione $ (" # new-category "). popSelect (" categorie "); a $ (" [id ^ = 'new-categoria'] ") popSelect. (& Quot; categorie "); allora funziona bene, c'è qualcosa che non va nel mio selettore?

Grazie per l'aiuto!

Answer 1

Ho appena risposto a una domanda simile, sostanzialmente non puoi avere due elementi con lo stesso ID sulla stessa pagina , causa questo problema esatto. Dovrai utilizzare una classe o modificare uno degli ID.

Answer 2

Non ho una risposta diretta ma sembra che tu abbia 2 chiamate ajax attive in sospeso contemporaneamente, il che potrebbe portare a una stranezza?

Answer 3

Ok, quindi qualcosa del genere?

(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);

Non ricevo errori ma popola solo la prima selezione, stessa risposta in IE. Sconcertante, aggiungi anche un " aspetta " funzione tra le chiamate e non ha fatto nulla. Avere il tag id == tag del nome ok? Qualcosa che ho appena notato, sostituendo " id = 'nuova categoria' " con " id = 'newwcategory' " fa funzionare !? c'è qualcosa che non va in " - "in ids?

Grazie ancora per tutto l'aiuto finora!

Answer 4

Da allora ho stabilito che questo è un problema con le schede dell'interfaccia utente di jQuery poiché il plug-in funziona perfettamente senza di loro! Gli elementi nella scheda attualmente selezionata non vengono popolati se la scheda precedentemente selezionata aveva un elemento della stessa id. Esempio:

prima scheda:

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

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

Seconda scheda:

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

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

Terza scheda:

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

Passando dalla scheda 1 alla scheda 2 - il prodotto verrà popolato ma non nuova categoria e passando da Tab 2 a Tab 3 - il prodotto non verrà popolato ...

vale a dire. se un elemento con un ID equivalente a una scheda precedente esiste nel file scheda corrente, non verrà popolata e (possibilmente?) la scheda precedente L'elemento sarà anche se non riesco a vederlo poiché non è caricato. Io ho provato a giocherellare con la cache ma non aiuta, specificando l'id del modulo poiché il suo genitore dovrebbe risolvere questo problema, ma perché è necessario, le schede non dovrebbero essere indipendenti?