Question

I want to add a callback to a jquery widget.

As an example, I see that callback in the draggable widget are all wrapped in the following:

$.ui.plugin.add("draggable", "connectToSortable", {
// callbacks in here
})

Does that mean I must also wrap my callbacks in this $.ui.plugin.add({}); bit? Is there another way to do it? Like, could I have a function in the widget options that could handle this so calling my grid would look vaguely like:

var foo = {
    LoadIt: function(url, formid){
        var bar = '',
        $('#baz').grid({
            title: {somevar : true},
            rowcontent: {data: setup and populate rows},
            onComplete: function(){
                //mycallback could go here
            }
        });
    }
}, // another grid loader, etc.

In my case I am using a grid. The grid loads some json data via an ajax call and then, now that the dom is populated with the grid, I want to do some manipulation with it (add a background color on hover, for instance). So I imagine being able to call as part of the grid:

onComplete : function(){//add my background color on hover here};

Any tips or suggestions on how to approach adding a callback to a jquery widget?

An example I found that confuses me:

var Green5 = {
    setLevel: function(x){
        //...
        this.element.css({background: greenlevels[level]});
        var callback = this.options.change;
        if ($.isFunction(callback)) callback(level);
    },
    // ... rest of widget definition
};
$.widget("ui.green5", Green5);

$('.target').green5({change: function(x) { alert ("The color changed to "+x); } });

Found this on a site explaining how to add a callback to a jquery widget but I don’t see anything about the $.ui.plugin.add bit nor do I see how change is getting passed into setLevel. How does setLevel get the function that is in change? If it is simply that anything passed to green5 is an option and thus is accessible via this.options then where does the callback method that is calling level in if ($.isFunction(callback)) callback(level); come from? I’m so confused. 🙁

Answer 1

In the example (found here), the author points out that we can pass the callback just like we pass any other option. It may be clearer if we rewrite how he calls the widget like this:

var options = {
    change: function(x){ alert("The color changed to "+x);}
}
$('.target').green5(options);

What that does is bind the “change” option with an anonymous function that takes a variable and alerts the user that the color has changed to that variable. Thus, the call

var callback = this.options.change;

retrieves the anonymous function passed as the ‘change’ option and assigns it to the variable callback. The line

if ($.isFunction(callback)) callback(level);

simply checks to see if the callback is indeed a function. It’s checking for a null value / an improperly passed argument. If the callback passed in options.change is actually a function, we call it with the argument “level.”

ui.plugin.add() does not need to be used unless we are modifying a plugin from outside of it (see example here).