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();
    }
});

Answer 2

There are at least four different ways to solve the issue of not calling your method with the right context from your success and complete handlers.

1. Use the context argument for $.ajax() so that this in your success handler will be what you want it to be so you can then call your method.

2. Use .bind() to create a new function stub that calls your method with the right context.

3. Save the value of this into a local variable so you can reference that variable when you need it in a stub function.

4. Use jQuery's cross browser version of .bind() which is called $.proxy().

I will offer you some examples of each.

First, the context option for $.ajax():

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

Then, using .bind().

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

Then, using a saved copy of this:

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

And finally with jQuery's `.proxy():

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

If you don't need IE8 support or you're fine with installing a polyfill for .bind(), then the .bind() option is my favorite because it just seems the cleanest.

Answer 3

The easiest way to solve this is to define a reference to your original this so you can access it from another context. Check this simple example:

(function(){
  var _self = this;

  function changeColor($element, color){
    $element.css("background-color", color)
  }

  $(".recolor-btn").click(function(){
    var self = this;
    $.ajax({
      url: "/Color/GetRandom",
      success: function(color){
        _self.changeColor($(self), color);
      }
    });
  });

})();