passing object to callback function in jquery

Question

I am recently working on small chat module , which require continuously checking the server for new message.

I am sending a ajax request to a server , and the server hold's the connection until new message is found(long polling).

Code :

var chatController = function(){
 
//other variable declaration

/**
*  Ajax call to monitor the new message , on complete of ajax call sending other call
*/

this.checkNewMessage = function(){
  console.log(this); // placed this for debugging purpose
       $.ajax({
         url : SITEURL.CHECK_MESSAGE,
         data : this.currrentUserDetails,
         dataType : 'json' ,
         cache    : false,
         success  :(function(obj){
            //temp = obj;
            return obj.parseNewMessageResponse;
         })(this),
         complete: (function(obj){
            //temp = obj;
            return obj.checkNewMessage;
         })(this),  
       });
       
     
};

  // other function and variable

});

When i tried to call

var mainController = new chatController();
mainController.checkNewMessage();

Problem

What i thought was that i would be able to send continuous single request to server, but to my surprise I only could send 2 ajax request one after the other.

My Debugging

When i tried to debug , i traced out that for the first call this object being passed points to the chatController

         complete: (function(obj){
            return obj.checkNewMessage;
         })(this),     // this here point to chatController object
         
         

For the second time this object being passed points to the ajax object

         complete: (function(obj){
            return obj.checkNewMessage;
         })(this),     // this here point to ajax object

I am using JavaScript closure to pass the chatController object to complete parameter of jquery

So what i want is way to pass parameter to jQuery complete function so that it's point to my original reference

Answer 1

There are various posible cross-browser solutions

You can use $.proxy:

In my opinion, the best practice.

$.ajax({
    //...
    success: $.proxy(function(json) {
         // `this` refers to the second argument of `$.proxy`
    }, this)
});

You can set the context option:

$.ajax({
    //...
    context: this,
    success: function(json) {
         // `this` refers to the value of `context`
    }
});

Or use a closure:

var self = this;
$.ajax({
    //...
    success: function(json) {
         // `this` refers to ajax request, use self instead
         $(self).dosomething();
    }
});