Adding callback to jquery widget

Question

I want to add a callback to a jquery widget.

As an example, I see that the callback in the draggable widgets is enclosed in the following:

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

Does this mean that I should also wrap my callbacks in this $ .ui.plugin.add ({}); Little? Is there any other way to do this? For example, can I have a function in the widget parameters that could handle this, so that calling my grid would look vaguely:

 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 use a grid. The grid loads some json data through an ajax call, and then, now when the dom is filled with the grid, I want to do some manipulation with it (for example, add a background color on hover). Therefore, I imagine the ability to call as part of a grid:

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

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

The example I found 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); } }); 

This was discovered on a site explaining how to add a callback to a jquery widget, but I can’t see anything about the $.ui.plugin.add bit, and I don’t see how change goes into setLevel . How to setLevel get a function that is in change ? If it is simple that everything passed to green5 is an option and therefore accessible through this.options, then where does the callback method come from, calling level in if ($.isFunction(callback)) callback(level); ? I am very puzzled .:(

Answer 1

In this example (found here ), the author indicates that we can pass a callback in the same way as we pass any other option. Maybe it will be clearer if we rewrite what he calls the widget as follows:

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

What this means is to associate the “change” option with an anonymous function that accepts a variable and warns the user that the color has changed to this variable. So the challenge

 var callback = this.options.change; 

retrieves the anonymous function passed as the "change" parameter and assigns it to the callback variable. Line

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

just checks if the callback is really a function. It checks for a null value / invalid argument. If the callback passed to options.change is actually a function, we call it with the "level" argument.

ui.plugin.add () does not need to be used if we do not modify the plugin from the outside (see the example here ).

Answer 2

I think this might work for u :)

 help_foo = function (){ alert('help !!!'); } var callback = 'help_foo'; (callback)(function (){ callback failed });