Revisions to Scope in an $.ajax callback function

update explanation to match the revised code

Source Link

edited Nov 3, 2012 at 20:16

11.3k
4
32
52

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());
                thisonComplete.doStuffcall(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 thisonComplete.doStuffcall(this, data) to invoke doStuff().

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());
                this.doStuff(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 this.doStuff(data) to invoke doStuff().

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

Improvements, fiddle, and comments.

Source Link

edited Nov 2, 2012 at 21:42

slashingweapon

11.3k
4
32
52

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

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

        $.ajax({
            url: 'badurl',
            context: c$,    // <---- add this line,
            complete: function (data) {
                alert('doAjax2 selfthis === c$.oTestScope: ' + (selfthis === c$.oTestScope).toString());
                onCompletethis.doStuff(data);
            }
        });
    };

    this.doStuff = function(data) {
        alert('doAjax1'doStuff selfthis === c$.oTestScope: ' + (selfthis === 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 this.doStuff(data) to invoke doStuff().

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

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

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());
                this.doStuff(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 this.doStuff(data) to invoke doStuff().

Source Link

created Nov 2, 2012 at 16:35

slashingweapon

11.3k
4
32
52

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

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

Collectives™ on Stack Overflow

Return to Answer