Question

I have a somewhat annoying issue when it comes to sending an Ajax request to a server and then returning the data on the success function within an JavaScript object. I’ve searched for similar questions, but none were really of the same manner as mine.

For example, I have the following code for sending a request within an object:

function SomeObject ( someVar )
{
    var someVar = someVar;
}

SomeObject.prototype.sendRequest = function ()
{
    $.ajax(
    {
        url  : "somePage.php",
        type : "POST",
        data :
        {
            someVar : someVar
        },
        success : this.parseSuccess
    } );
};

SomeObject.prototype.parseSuccess = function ( data )
{
    if ( data === "success" )
    {
        this.proceed();  // Error
    }
    else
    {
        alert( "Server failed request." );
        this.proceed();
    }
};

SomeObject.prototype.proceed = function ()
{
    // Do something else
};

I know that this.proceed() will fail because this is not the SomeObject instance.

Still, how can I efficiently refer back to the object after the request is complete?
I found I could do the following to achieve what I want, but it does not feel proper, and I would like a better way to handle the Ajax calls:

SomeObject.prototype.sendRequest = function ()
{
    var me = this;

    $.ajax(
    {
        url  : "somePage.php",
        type : "POST",
        data :
        {
            someVar : someVar
        },
        success : function ( data )
        {
            me.parseSuccess( data );  // Will work
        }
    } );
};

Thanks for any help on the matter.

Answer 1

You can use the context option of $.ajax. Specifically, using context: this will set the this value inside parseSuccess to the current this value, which is what you want.

$.ajax({
  // ...
  context: this,
  success: this.parseSuccess
});