javascript class property not set in success function of ajax call

Question

Sorry for the duplication but I can find any solution in the others posts.

I'm trying to fill a javascript object using a ajax call to a webservice. I don't understand the logic of this and why my object in not set after the call. I wrote this little example to explain my problem :

Code :

function Cellule(){
    this.test = 0;
    this.textfunction();
}

Cellule.prototype.textfunction = function(){
    this.test = 1;
    $.ajax({
        type: "GET",
        url: "BASEURL/cellules", 
        data: "",
        success: function(msg){
            console.log("success");
            this.test = 2;
            console.log(cellule);
        }
    });
};

var cellule = new Cellule();

Console out :

success
Cellule {test: 1}

Rayon · Accepted Answer · 2016-03-11T12:47:05.643

9

this does not refer to cellule

Use .bind() or context in argument of ajax settings

The bind() method creates a new function that, when called, has its this keyword set to the provided value

Or specifying context: this will use context of cellule in success handler.

Try this:

function Cellule() {
  this.test = 0;
  this.textfunction();
}

Cellule.prototype.textfunction = function() {
  this.test = 1;
  $.ajax({
    type: "GET",
    url: "../slimrest/andon/cellules",
    data: "",
    success: function(msg) {
      console.log("success");
      this.test = 2;
      console.log(cellule);
    }.bind(this)
  });
};

var cellule = new Cellule();

edited Mar 11 '16 at 12:47

answered Mar 11 '16 at 12:42

Rayon

36,219
4
49
76

Well done . Work perfectly – Gauthier Mar 11 '16 at 12:44
Happy to help! Kindly [accept and up-vote](http://meta.stackexchange.com/questions/23138/how-to-accept-the-answer-on-stack-overflow) the best solution which has solved the purpose :) __Happy coding!__ – Rayon Mar 11 '16 at 12:45

score 1 · Answer 2 · answered Mar 11 '16 at 12:43

Your issue gets caused because of the fact that the this-scope changed when using the ajax call.

Binding the this scope to the call should solve your issue.

function Cellule(){
    this.test = 0;
    this.textfunction();
}

Cellule.prototype.textfunction = function(){
    this.test = 1;
    $.ajax({
        type: "GET",
        url: "../slimrest/andon/cellules", 
        data: "",
        success: function(msg){
            console.log("success");
            this.test = 2;
            console.log(cellule);
        }.bind(this)
    };
};

var cellule = new Cellule();

score 1 · Answer 3 · answered Mar 11 '16 at 12:43

Your this in your AJAX success handles refers to the AJAX call, not to your object. Try this:

Cellule.prototype.textfunction = function(){
    this.test = 1;
    var _this = this;
    $.ajax({
        type: "GET",
        url: "BASEURL/cellules", 
        data: "",
        success: function(msg){
            console.log("success");
            _this.test = 2;
            console.log(cellule);
        }
    });
};

javascript class property not set in success function of ajax call

3 Answers3

Linked