questões de plugin primeiro jQuery
Pergunta
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!
Solução
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.
Outras dicas
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?
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!
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?