Hey guys, first off let me just say Im a jQuery noob, so if you see
any obvious errors/improvements, please feel free to inform me! 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 jQuery UI 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.fn.popSelect = function(table) {

    return $(this).each(function(){

        var obj = $(this);

        if(this.nodeName.toLowerCase() == 'select'){
                $.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);

I also noticed the following:

Replacing "id='new-category'" with "id='newwcategory'" makes it work!?
is there something wrong with "-"'s in ids?

Thanks!

Reply via email to