javascript - Adding a callback to a jquery widget - Stack Overflow

admin管理员组

文章数量:1025465

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); e from? I'm so confused. :(

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); e from? I'm so confused. :(

• javascript
• jquery
• callback
• widget

Share Improve this question Follow edited Dec 31, 2010 at 9:55 Lothar asked Dec 31, 2010 at 9:47 LotharLothar 3,50988 gold badges4646 silver badges5858 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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).

I think this could work for u :)

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

(callback)(function (){
   callback failed
});

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); e from? I'm so confused. :(

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); e from? I'm so confused. :(

• javascript
• jquery
• callback
• widget

Share Improve this question Follow edited Dec 31, 2010 at 9:55 Lothar asked Dec 31, 2010 at 9:47 LotharLothar 3,50988 gold badges4646 silver badges5858 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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).

I think this could work for u :)

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

(callback)(function (){
   callback failed
});

本文标签： javascriptAdding a callback to a jquery widgetStack Overflow