Javascript ajax and callback

Question

I don't realy understand why my variable is undefined This is my code:

Calendar = function() {

    this.data;  
    this.init = function(path, callback){
        $.ajax({
            url:path,
            type:'GET',
            success:function(data){
                this.data = data;
                console.log(this.data);
                callback();
            }
        })
    }

    this.create = function(){
        this.generateYear();
    }   

    this.generateYear = function(){
        console.log(this.data); 
    }   
}

And I use it like this:

$(document).ready(function(){
    var calendar = new Calendar();
    calendar.init(path,function(){
        calendar.create();
    });
});

So the first console.log is good but the second is undefined, I don't understand why because he is called after.

Thanks for your help

possible duplicate of How to return the response from an AJAX call? — elclanrs
– elclanrs, Commented Jul 26, 2013 at 8:25
Hi use var k=this.data;in success function k=data; in generateYear = k; — Dyapa Srikanth
– Dyapa Srikanth, Commented Jul 26, 2013 at 8:27

Denys Séguret · Accepted Answer · 2013-07-26 08:28:41Z

5

Set context param in ajax function. Try this one:

 $.ajax({
        url:path,
        type:'GET',
        context: this,
        success:function(data){
            this.data = data;
            console.log(this.data);
            callback();
        }
    })

edited Jul 26, 2013 at 8:28

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

answered Jul 26, 2013 at 8:26

mikach

2,4272 gold badges16 silver badges15 bronze badges

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

1 Comment

Denys Séguret Over a year ago

@MichaelWalter context. And it looks like a good answer. +1 from me.

Denys Séguret · Accepted Answer · 2013-07-26 08:25:34Z

3

this, in the callback you give to ajax, isn't your calendar.

Change your init function to

this.init = function(path, callback){
    var calendar = this;
    $.ajax({
        url:path,
        type:'GET',
        success:function(data){
            calendar.data = data;
            console.log(calendar.data);
            callback();
        }
    })
}

answered Jul 26, 2013 at 8:25

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

3 Comments

Ajouve Over a year ago

Thanks this is a good answer but I prefer Michael's answer, I find this more proper

Denys Séguret Over a year ago

@ant Personally I really prefer to always keep in mind the native closure based solution than to try to remember all the parameters of the ajax function. But his answer is good too (I upvoted it) so I won't reproach you to choose it. Simply be sure to understand my answer because it's the solution you'll use in all other similar cases :)

rab Over a year ago

@ant dystroy answer is more readable .. Michael's answer using this will make confusion

Ayman Farhat · Accepted Answer · 2013-07-26 08:34:14Z

0

Within this.generateYear your call to "this" is not more referencing your Calendar object and is referencing the Window object which most probably doesn't have data as an attribute. Make sure you read more about Javascript binding

Storing an instance of this in a variable within your object and later using it, would work. Example:

this.init = function(path, callback){
    var self = this;
    $.ajax({
        url:path,
        type:'GET',
        success:function(data){
            self.data = data;
            console.log(self.data);
            callback();
        }
    })
}

answered Jul 26, 2013 at 8:34

Ayman Farhat

2,0983 gold badges17 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript ajax and callback

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related