Accessing `this` in Ajax callback, all within an Object

Question

I\'m dealing with a problem about an Ajax callback inside of an Object. Please consider this code :

Search.prototype =
{
    ask : function( query )
    {
           


        

Answer 1

You can use the ES5 .bind function to set this correctly:

$.ajax(...).done(this.loadResults.bind(this));

(use the shim at the above link, or the jQuery $.proxy equivalent on older browsers).

Alternatively, add context: this to the $.ajax options:

$.ajax({
    ...,
    context: this
}).done(this.loadResults);

Note that in either case you will override jQuery's default behaviour of passing the ajax option object in this.

p.s. it's also good practise to return the result of the $.ajax() chain so that the user of your object can chain additional callbacks (e.g. a .fail handler) to it.