JQuery: Referencing outer scope within callback

Question

I have an issue with OO Javascript and a jQuery callback. If you look at the sample below it should explain everything.

How do I call functionToCall() deep within this functception.

function outerClass() {
    this.functionToCall = function() {
        //do something
    }

    this.someOtherFunction = function() {

    this.aCoupleOfVariables1 = 2;
    this.aCoupleOfVariables2 = "stuff";

    $.ajax({
        success: function() {
        //How do I call functionToCall() right here
        //TRIED:
            functionToCall();
            this.functionToCall();
            that.functionToCall();
        }
    }); 
    }
}

Frédéric Hamidi · Accepted Answer · 2011-08-09 14:53:18Z

14

You can pass this as the context option to $.ajax():

$.ajax({
    context: this,
    success: function() {
        // Here, 'this' refers to the same object as in the caller.
        this.functionToCall();  
    }
});

answered Aug 9, 2011 at 14:53

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

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

3 Comments

Andrew Over a year ago

Ooo, I like this so much more.

yoda Over a year ago

Just a sidenote for the OP: whenever you need to make use of this and can't use context or any other property for the matter (lots of cases), api.jquery.com/jQuery.proxy

Mike Purcell Over a year ago

Nice, this avoids having to use $.proxy as well.

Andrew · Accepted Answer · 2011-08-09 14:52:44Z

6

Have a local reference to it,

function outerClass() {

    var self = this;

    this.functionToCall = function() {
    //do something
    }

    this.someOtherFunction = function() {

    this.aCoupleOfVariables1 = 2;
    this.aCoupleOfVariables2 = "stuff";

    $.ajax({
        success: function() {
           self.functionToCall();
       }
    }); 
   }
}

answered Aug 9, 2011 at 14:52

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

Comments

Matt Ball · Accepted Answer · 2011-08-09 14:52:45Z

5

You need to define that in the outer scope.

function outerClass() {
    var that = this;

    // ...

     $.ajax({
        success: function() {
            that.functionToCall();
        }
    }); 
}

answered Aug 9, 2011 at 14:52

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Comments

jAndy · Accepted Answer · 2011-08-09 15:01:21Z

4

You need to store the reference for the this value from the parent scope:

var parentScope = this;

and then access functionToCall via that object

parentScope.functionToCall();

Example:

function outerClass() {
    var parentScope = this;

    this.functionToCall = function() {
        //do something
    }

    // ...

    $.ajax({
       success: function() {
           parentScope.functionToCall();
       }
    });
}

Another way to accomplish that would be to use Es5's .bind() to set the value for this within your inner function(-context)

$.ajax({
    success: function() {
        // Here, 'this' refers to the same object as in the caller.
        this.functionToCall();  
    }.bind(this)
});

edited Aug 9, 2011 at 15:01

answered Aug 9, 2011 at 14:53

jAndy

237k57 gold badges313 silver badges363 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-08-09 14:56:00Z

2

Maintain the scope of the function in a local variable and use it or you can also use jquery proxy in which you can specify the context.

function outerClass() {
    this.functionToCall = function() {
        //do something
    }

    this.someOtherFunction = function() {

    this.aCoupleOfVariables1 = 2;
    this.aCoupleOfVariables2 = "stuff";


    $.ajax({
        success: $.proxy(function() {
            this.functionToCall();
        }, this)
    }); 
    }
}

answered Aug 9, 2011 at 14:56

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Collectives™ on Stack Overflow

JQuery: Referencing outer scope within callback

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related