questões de plugin primeiro jQuery

Question

Ei pessoal, em primeiro lugar deixe-me dizer que eu sou um noob jQuery! Eu quero fazer um plugin simples que auto-preenche um html selecionar elemento, ele funciona muito bem no primeiro elemento, mas quando eu chamá-lo de novo para preencher um segundo ele acrescenta nada. Aqui estão as minhas chamadas no separador ajax onde #product e # new-categoria são os elementos selecionados:

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

E aqui está o 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);

Estranhamente se eu mudar a segunda chamada de função $("#new-category").popSelect("categories"); para $("[id^='new-category']").popSelect("categories"); Em seguida, ele funciona bem, há de errado alguma coisa com o meu seletor?

Obrigado por qualquer ajuda!

Answer 1

Eu apenas respondeu a uma pergunta semelhante, basicamente você não pode ter dois elementos com o mesmo ID na mesma página , faz com que este problema exato. Você terá que usar uma classe ou alterar um dos IDs.

Answer 2

Eu não tenho uma resposta direta, mas parece que você terá 2 ajax ativo chama em circulação em praticamente ao mesmo tempo que poderia levar a alguma estranheza?

Answer 3

Ok, então algo como isto?

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

Eu recebo nenhum erro mas ainda só preenche a primeira escolha, mesma resposta no IE. Intrigante, até mesmo adicionar uma função de "espera" inbetween chamadas e ele não fez nada. É ter o ID tag == nome tag ok? Algo que eu só notei, substituindo "id = 'new-categoria'" com o "id = 'newwcategory" faz funcionar !? É ther errado somthing com "-" é em ids

Obrigado novamente por toda a ajuda até agora!

Answer 4

Eu tenho uma vez estabelecido que este é um problema com guias jQuery UI uma vez que o plug-in funciona perfeitamente sem eles! Elementos no separador actualmente seleccionada não estão a ser preenchidas se o separador previamente seleccionado tinha um elemento da mesma Eu iria. Exemplo:

primeira guia:

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

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

Segundo 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>

Em terceiro lugar Tab:

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

Indo de Tab 1 a Tab 2 - produto será povoada, mas não nova categoria e indo de Tab 2 para Tab 3 - produto não será preenchida ...

i. se um elemento com um equivalente do ID para um separador anterior existe no guia atual, não será preenchido e (possivelmente?) a guia anterior elemento será embora eu não posso ver isso desde que ele não está carregado. Eu tenho tentou mexer com cache, mas isso não ajuda, indicando o identificador do formulário como seu pai deve corrigir isso, mas por que é necessário, Não devem os guias ser independente?