Question

I have a function that I call multiple times in my projects:

function fillSelect(select) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Data.asmx/Status",
        dataType: "json",
        async: true,
        success: function(data) {
            $.each(data.d, function(i) {
                select.append('<option value=' + data.d[i].value + '>' + data.d[i].name + '</option>');
            });
        },
        error: function(result) {
            alert("Error occured. Contact admin");
        }
    });
}

Then in my code I’m using this like so:

fillSelect($('select#status1'));
fillSelect($('select#status2'));
fillSelect($('select#status3'));

What I would like to do is to convert my function into plugin, so I would be able to call it as so:

$('select#status1, select#status2, select#status3').fillSelect();

Using http://starter.pixelgraphics.us/ I’ve generated empty schema:

(function($) {
    $.ajaxSelect = function(el, select, options) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data("ajaxSelect", base);

        base.init = function() {
            base.select = select;

            base.options = $.extend({}, $.ajaxSelect.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        // base.functionName = function(paramaters){
        // 
        // };

        // Run initializer
        base.init();
    };

    $.ajaxSelect.defaultOptions = {
        clear: false //append to select or replace current items
    };

    $.fn.ajaxSelect = function(select, options) {
        return this.each(function() {
            (new $.ajaxSelect(this, select, options));
        });
    };

})(jQuery);

but I don’t know how to fill it.
What I would like to do is to call sever ones and then fill as many select items as I put in parameters.
Is all that code really necessary for such a small plugin?

I know that there are probably some plugins that this functionality, but I would like to create my own plugin, just to learn a bit more 🙂

Answer 1

You don’t need all that boiler plate you could do as below

$.fn.fill = function fillSelect(options) {
   var self = this; 
   options = $.extend({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "Data.asmx/Status",
            dataType: "json",
            async: true,
            success: function(data) {
               var list = "";
               $.each(data.d, function(i) {
                     list += '<option value=' 
                              + data.d[i].value + '>' 
                              + data.d[i].name 
                              + '</option>';
                  });
               self.filter("select").each(function(){
                   $(this).append(list);
               });
             },
            error: function(result) {
                alert("Error occured. Contact admin");
            }
          },options);
    $.ajax(options);
    return this;
}

the first thing to notice that the function is added to the jQuery prototype/$.fn. Then the success handler have been changed so that all selected elements will be handled and lastly the selection is returned to make chaining possible, as this is usually expect when using jQuery.

The above code will append the same options to all selected “select” elements only. If you select something else the options will not be appended to those elements.

I’ve changed the signature to accept an options element. In the above version there’s default vesrion equaling your ajax options. If other values are supplied, they will override the default ones if a default exist. If a default does not exist the values will be added to the options object