AJAX call within Javascript class (prototype function)

Question

I am implementing a Javascript class which I am having trouble getting to work. After I initialize an instance of the class, I then call a method of that class which makes an AJAX request. The data that is returned on 'success' of the AJAX function is then needed to be set to the a property of that instance. When I output the this.results variable later in my code, it is empty when it shouldn't be. Here is my code:

//Individual Member Class
function GetReports(options) {  
    this.options = options;
    this.results = {};
}

GetReports.prototype.getResults = function() {
    jQuery.ajax({
        type      :  'post',
        dataType  :  'json',
        url       :  'reporting/getStaffMemberReports',
        async     :  false,
        data      :  options,
        success   :  function(data) {
            this.results = data;
            setResult(this.results);
        }
    }); 
}

GetReports.prototype.returnResults = function(type) {   
    if(type === "JSON") {       
        JSON.stringify(this.results);
    } else if (type === "serialize") {
        this.results.serialize();
    }
return this.results;
};

GetReports.prototype.setResult = function(data) {
    this.results = data;
};

And my code which creates an instance of the 'class':

var jsonString = <?php echo json_encode($JSONallocatedStaffMembers); ?>;
    options = {
        all     : true,
        members : JSON.parse(jsonString),
        type    : 'highperform'
    };
    var all = new GetReports(options);
    all.getResults();
    var results = all.returnResults("JSON");
    console.log(results);

Now, as the AJAX call is asynchronous, I was thinking this may be the issue? I have tried putting 'async : false,' in but that doesn't help. Can anyone see where I am going wrong?

Marcogomesr · Accepted Answer · 2018-07-19 11:22:45Z

11

There is one thing to be fixed here.

The this

inside ajax callback refers to ajax object, and not your GetReport instance. You have to declare a var on getResults and point it to this before make the ajax.

GetReports.prototype.getResults = function() {
    var self = this;
    jQuery.ajax({
        type      :  'post',
        dataType  :  'json',
        url       :  'reporting/getStaffMemberReports',
        async     :  false,
        data      :  options,
        success   :  function(data) {
            self.results = data;
            setResult(self.results);
        };
    }); 
}

edited Jul 19, 2018 at 11:22

Marcogomesr

2,6723 gold badges33 silver badges41 bronze badges

answered Aug 14, 2014 at 13:11

Callebe

1,0977 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AJAX call within Javascript class (prototype function)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related