I have a "class"/function called Spotlight. I'm trying to retrieve some information through ajax and assign it to a property of Spotlight. Here is my Spotlight class:

function Spotlight (mId,mName) {
    this.area = new Array();

    /**
     * Get all area information
     */
    this.getArea = function () {

        $.ajax({
            url: base_url +'spotlight/aGetArea',
            type: 'POST',
            success: function (data) {
                this.area = data;
            }
        });
    }
}

I have assigned the object to an array, and it would be difficult to get to it from within Spotlight, so I'm hoping to access everything using 'this.' It appears though that the success function is outside of the class, and I don't know how to make it inside the class.

Is there a way to get the data into the class property using this.area rather than Spotlight.area?

I have a "class"/function called Spotlight. I'm trying to retrieve some information through ajax and assign it to a property of Spotlight. Here is my Spotlight class:

function Spotlight (mId,mName) {
    this.area = new Array();

    /**
     * Get all area information
     */
    this.getArea = function () {

        $.ajax({
            url: base_url +'spotlight/aGetArea',
            type: 'POST',
            success: function (data) {
                this.area = data;
            }
        });
    }
}

I have assigned the object to an array, and it would be difficult to get to it from within Spotlight, so I'm hoping to access everything using 'this.' It appears though that the success function is outside of the class, and I don't know how to make it inside the class.

Is there a way to get the data into the class property using this.area rather than Spotlight.area?

• javascript
• jquery

• 1 I think you want to get the data from your ajax request and use it elsewhere in your class? Defined a new function, lets say newFun(newData) and then in your success function call, newFun(data). Is that what you want to do? – Leeish Commented Jan 14, 2013 at 18:51
• That may also work. I ended up using the context option in $.ajax. – Tyler Commented Jan 14, 2013 at 19:03

3 Answers 3

The value of this is dependent on how each function is called. I see 3 ways around this problem:

1. Creating an alias to this

var that = this;
this.getArea = function () {
    $.ajax({
        url: base_url +'spotlight/aGetArea',
        type: 'POST',
        success: function (data) {
            that.area = data;
        }
    });
};

2. Using jQuery .ajax context option

this.getArea = function () {
    $.ajax({
        url: base_url +'spotlight/aGetArea',
        type: 'POST',
        context : this,
        success: function (data) {
            this.area = data;
        }
    });
};

3. Using a bound function as the callback

this.getAreaSuccess = function (data) {
    this.area = data;
};
this.getArea = function () {
    $.ajax({
        url: base_url +'spotlight/aGetArea',
        type: 'POST',
        success: this.getAreaSuccess.bind(this)
    });
};

Well Spotlight.area wouldn't work anyway. You just need to preserve the outer this:

this.area = [];
var theSpotlight = this;

and then in the callback:

  theSpotlight.area = data;

When inside the success function, this corresponds to the scope of the success function.

function Spotlight (mId,mName) {
    this.area = [];
    var scope = this;

    /**
     * Get all area information
     */
    this.getArea = function () {

        $.ajax({
            url: base_url +'spotlight/aGetArea',
            type: 'POST',
            success: function (data) {
                scope.area = data;
            }
        });
    }
}