Scope in an $.ajax callback function

Question

If I am using this code why has the scope changed for the "doStuff" alert? Is there a way that I can make sure that the scope is my object and not the Window object?

Here is the same code in jsfiddle.

(function ($) {
    var c$ = {};

    c$.TestScope = function () {

        this.doAjax = function (onComplete) {
            var self = this;
            $.ajax({
                url: 'badurl',
                complete: function (data) {
                    alert('doAjax2 self === c$.oTestScope: ' + (self === c$.oTestScope).toString());
                    onComplete(data);
                }
            });
            alert('doAjax1 self === c$.oTestScope: ' + (self === c$.oTestScope).toString());  
        };

        this.doStuff = function (data) {
            var self = this;
            alert('doStuff self === c$.oTestScope: ' + (self === c$.oTestScope).toString());
        }

    };

    c$.oTestScope = new c$.TestScope();
    c$.oTestScope.doAjax(c$.oTestScope.doStuff);
})(jQuery);

slashingweapon · Accepted Answer · 2012-11-03 20:16:03Z

5

You should be able to specify the this value as the context in your $.ajax() parameters:

var c$ = {};

c$.TestScope = function() {

    this.doAjax = function(onComplete) {

        alert('doAjax1 this === c$.oTestScope: ' + (this === c$.oTestScope).toString());

        $.ajax({
            url: 'badurl',
            context: this,
            complete: function(data) {
                alert('doAjax2 this === c$.oTestScope: ' + (this === c$.oTestScope).toString());
                onComplete.call(this, data);
            }
        });
    };

    this.doStuff = function(data) {
        alert('doStuff this === c$.oTestScope: ' + (this === c$.oTestScope).toString());
    }

};

c$.oTestScope = new c$.TestScope();
c$.oTestScope.doAjax(c$.oTestScope.doStuff);

Edit I made a fiddle for this and verified that it works properly. There's no messing around with an extra self parameter or having to muck around with closures to keep your variables.

Part of what you were missing was calling onComplete.call(this, data) to invoke doStuff().

edited Nov 3, 2012 at 20:16

answered Nov 2, 2012 at 16:35

slashingweapon

11.4k4 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Jimmery · Accepted Answer · 2012-11-02 16:29:20Z

3

I have altered your code to pass a reference to this onto the doStuff() code.

(function ($) {
    var c$ = {};

    c$.TestScope = function () {

        this.doAjax = function (onComplete) {
            var self = this;
            $.ajax({
                url: 'badurl',
                complete: function (data) {
                    alert('doAjax2 self === c$.oTestScope: ' + (self === c$.oTestScope).toString());
                    onComplete(data,self);
                }
            });
            alert('doAjax1 self === c$.oTestScope: ' + (self === c$.oTestScope).toString());  
        };

        this.doStuff = function (data,thisRef) {
            var self = thisRef;
            alert('doStuff self === c$.oTestScope: ' + (self === c$.oTestScope).toString());
        }

    };

    c$.oTestScope = new c$.TestScope();
    c$.oTestScope.doAjax(c$.oTestScope.doStuff);
})(jQuery);

answered Nov 2, 2012 at 16:29

Jimmery

10.3k25 gold badges90 silver badges169 bronze badges

Collectives™ on Stack Overflow

Scope in an $.ajax callback function

2 Answers 2

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Linked

Related