jQuery widget and internal callbacks

Question

This doesn't work, but gives you the idea: a widget needs to use its own method as a callbacK:

$.widget("me.mywidget", {

    _create: function() {
        this.call("mymodule", "myaction", {arg: this.options.value}, _parseData);
    },

    _parseData: function(data) {
        console.log(data);
    },

    call: function(module, action, params, callback) {
        var params = params || {};
        var url = "/" + module + "/"  + action;

        $.post(url, params, function(data) {
            if (data.payload) callback(data.payload);
        });
    },
});

It currently throws the exception: Uncaught ReferenceError: _parseData is not defined

What's the canonical way of doing this?

Well, using that and 'this' in the callback is window, rather than the widget object, which is undesirable — Wells, May 31 '12 at 17:56

score 0 · Answer 1 · edited May 23 '17 at 10:09

The $.post callback needs to call your own callback using .apply or .call, both of which allow you to set what the scope of this is in the function you call.

call: function(module, action, params, callback) {
    var params = params || {};
    var url = "/" + module + "/"  + action;
    var self = this;

    $.post(url, params, function(data) {
        if (data.payload) callback.apply(self, [ data.payload ]);
    });
},

Or:

call: function(module, action, params, callback) {
    var params = params || {};
    var url = "/" + module + "/"  + action;

    $.post(url, params, function(data) {
        if (data.payload) callbac.call(self, data.payload);
    });
},

You can read this for more information on apply/call.

jQuery widget and internal callbacks

1 Answers1