Question

I have a JS class that contains a AJAX post. I’m trying to refer to the class members from within the post function using this but it doesn’t seem to be working.

For example, from this:

function Classy() {

  this.goal = 0;

  $.post(   
    "class/initial.php",
    function(back) {                
        this.goal = back.goal;  
  }, "json");       

  this.SampleFunction = function() {
    alert(this.goal);   
  }

}

tester = new Classy();
tester.SampleFunction();

The alert box outputs a value of 0, even though this is definitely not what is coming back from the php file. I think the issue is I need something other than this to refer to the parent class. Anyone have any ideas?

Answer 1

function Classy() {

    this.goal = 0;

     // jQuery.proxy returns a function
    $.post("class/initial.php", $.proxy(function (back) {
        this.goal = back.goal;
    }, this), "json");
      // ^-------- is manually set in your handler

    this.SampleFunction = function () {
        alert(this.goal);
    }
}

You can use the jQuery.proxy()^[docs] method to ensure the proper this value.

---

Another possibility is to use the long form jQuery.ajax()^[docs] method, where you can set the context: parameter to give you the desired this value.

function Classy() {

    this.goal = 0;

    $.ajax({
        type:'POST',
        url:"class/initial.php", 
        dataType: 'json',
        context: this, // <--set the context of the callbacks
        success: function (back) {
            this.goal = back.goal;
        }
    });    
    this.SampleFunction = function () {
        alert(this.goal);
    }
}