Первые проблемы с плагином jQuery
Вопрос
Привет, ребята, прежде всего позвольте мне сказать, что я нуб по jQuery!Я хочу создать простой плагин, который автоматически заполняет элемент выбора html, он отлично работает с первым элементом, но когда я вызываю его снова, чтобы заполнить второй, он ничего не добавляет.Вот мои вызовы на вкладке ajax, где #product и #new-category являются элементами выбора:
$(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 >
А вот плагин:
(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);
Странно, если я изменю второй вызов функции$("#new-category").popSelect("categories");
к$("[id^='new-category']").popSelect("categories");
тогда все работает нормально, что-то не так с моим селектором?
Спасибо за любую помощь!
Решение
Я только что ответил на аналогичный вопрос, в принципе вы не можете иметь два элемента с одинаковым идентификатором на одной странице, это вызывает именно эту проблему.Вам придется использовать класс или изменить один из идентификаторов.
Другие советы
У меня нет прямого ответа, но похоже, что у вас будет два активных вызова ajax практически одновременно, что может привести к некоторой странности?
Хорошо, что-то вроде этого?
(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);
Я не получаю никаких ошибок, но он по-прежнему заполняет только первый выбор, тот же ответ в IE.Удивительно, но даже добавление функции «ожидания» между вызовами ничего не дало.Хорошо ли иметь тег id == name?Я только что заметил: замена «id='new-category'» на «id='newwcategory'» заставляет это работать!?что-то не так с "-" в идентификаторах?
Еще раз спасибо за всю помощь!
С тех пор я установил, что это проблема с вкладками пользовательского интерфейса jQuery, поскольку плагин прекрасно работает без них!Элементы на текущей выбранной вкладке не заполняются, если ранее выбранная вкладка имела такой же элемент id.Пример:
первая вкладка:
<select id="new_category" name="new_category">
<option value="">Select Category</option>
</select>
Вторая вкладка:
<select id="product" name="product">
<option value="">Select Product</option>
</select>
<select id="new_category" name="new_category">
<option value="">Select Category</option>
</select>
Третья вкладка:
<select id="product" name="product">
<option value="">Select Product</option>
</select>
Переход от Tab 1 к Tab 2 - продукт будет заполнен, но нет new_category и переход от Tab 2 к Tab 3 - продукт не будет заполнен...
то естьесли элемент с id, эквивалентным предыдущей вкладке, существует в текущая вкладка, она не будет заполнена и (возможно?) предыдущая вкладка элемент будет, хотя я не могу видеть это, так как он не загружен.У меня есть попробовал поиграть с кэшем, но не помогло, указав ID формы как его родитель должен исправить это, но зачем это нужно, Разве вкладки не должны быть независимыми?