How does jquery-ui know how to bind event callbacks supplied as init options?

Question

How does jquery-ui knows to bind callbacks passed as init options? I'm thinking the answer is somewhere in the $.widget.bridge method (ln 71) but I'm not entirely sure what's going on there.

An example of what I'm talking about is something like the autocomplete search event. The code example shows that I can bind to 'search' with init options but I don't see anything specific to this behavior autocomplete's code.

This technique seems cool. I'd like to leverage it.

Answer 1

I'm not that familiar with the jQueryUI code, but here's an example of how you could call a callback passed as an argument.

Try it out: http://jsfiddle.net/pshLK/

When the example loads, you'll get 2 alerts. This is the result of the callback that was passed running for both of the matched <div> elements. You can change the callback function and click "Run" at the top to see that your callback is running.

(function($) {
       // create myPlugin
    $.fn.myPlugin = function(options) {
           // iterate through all elements the selector matched
        return this.each(function() {
                // Change the color to blue
            $(this).css('color','blue');
                // Call the callback using the .call() method
                //    so that we can pass the value of "this"
                //    as the element in the iteration
            options.callback.call(this);
        });
    };
})(jQuery);

   // Find all <div> elements on the page, and call myPlugin which
   //   receives an object as an argument that has a "callback" property
   //   whose value is the function that will be called in the plugin.
$('div').myPlugin({
         // This function will run for each <div> displaying the ID of the <div>
    callback:function() { alert('the id is ' + this.id); }
});

Answer 2

Functions in JavaScript can be passed as values to other functions and executed. E.g.:

function execute(fn)
{
    fn(); // execute function passed as a parameter
}

var alertHelloWorld = function ()
{
    alert("Hello World");
};

execute(alertHelloWorld); // this will alert "Hello World"

So what the jQuery Autocomplete plug-in is doing, is caching whatever functions are passed in it's initializer, and then executing them when it needs to. I.E.: when data needs to be handled or when data has been handled.

Here's an example, somewhat similar to the Autocomplete plug-in:

// execute three functions contained in an object literal
function execute(o)
{
    o.One();
    o.Two();
    o.Three();
};

// call "execute" passing in object literal containing three anonymous functions
// this will alert "One", then "Two", then "Three"
execute(
{
    One: function () { alert("One"); },
    Two: function () { alert("Two"); },
    Three: function () { alert("Three"); }
});

Parameters can also be passed from a function that is executing another function:

function execute(fn)
{
    // execute function passed as a parameter with a parameter
    fn("Hello World");
};

execute(function (s)
{
    // parameter "s" supplied by "execute" will contain "Hello World"
    alert(s);
});