Hey guys, first off let me just say Im a jQuery noob! I want to make a simple plugin that auto-populates a html select element, it works fine on the first element but when I call it again to populate a second it appends nothing. Here are my calls in the ajax tab where #product and #new-category are the select elements:
$(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 >
And here is the 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);
Strangely if I change the second function call
$("#new-category").popSelect("categories");
to
$("[id^='new-category']").popSelect("categories");
it then works fine, is there something wrong with my selector?
Thanks for any help!