this.function is not a function error, but function exists

Question

I have some code to get calendar events and display them. The display is only updated if the events have changed, since the last call.

var calendar = {

    events = null,

    display_calendar_events : function (data) {
        // Some display stuff...
    },

    get_events: function() {

        // Get messages for calendar
        $.getJSON("/ajax/get-events/", function(json){

            var new_events = json.data;
            // If events haven't changed, do nothing
            if (this.events === new_events) {
                return true;
            }

            // Events have changed. 
            // Save new events
            this.events = new_events;

            // Display new events
            this.display_calendar_events(json);
        });
   },
}

I call this with:

calendar.get_queued_events();

The problem is, I'm getting the error "this.display_calendar_events is not a function" (last line of code). But if I change this line to:

calendar.display_canendar_events(josn)

it works. The storing of the old events with "this.events" works fine in both cases.

Can someone explain this to me? How can "this" work for some stuff and not others? Thanks.

Inside the callback, `this` refers to something else (the `jqXHR` object afaik). — Felix Kling, Feb 13 '12 at 16:04
possible duplicate of [What context is the jQuery.post callback function invoked in?](http://stackoverflow.com/questions/1064392/what-context-is-the-jquery-post-callback-function-invoked-in) — Felix Kling, Feb 13 '12 at 16:05

score 10 · Accepted Answer · answered Feb 13 '12 at 16:05

10

In a jQuery AJAX callback, this references the ajax request object. Try using var self = this; before your AJAX call, and in the callback use self.display_calendar_events().

Alternatively, you could just reference calendar.display_calendar_events() directly. But that's not easily refactored like the self method is.

answered Feb 13 '12 at 16:05

kitti

14,663
31
49

2

This isn't really anything to do with jQuery or AJAX, this is simply the way closures work in JavaScript. – Mike Christensen Feb 13 '12 at 16:19
This explains why it's failing. Thanks. But why does this.events still work? Shouldn't this fail for the same reason? – Aine Feb 13 '12 at 16:24
1

@Aine `this.events` is a property, not a method. Javascript objects are dynamic, so when you check `this.events` you just get `undefined`, and setting `this.events` creates a new property on `this`. – kitti Feb 13 '12 at 16:31

score 2 · Answer 2 · edited Feb 13 '12 at 16:11

2

When you call this.display_calendar_events() inside the ajax request you area ctually in a different context than your object. You have to do:

var calendar = {

events = null,

display_calendar_events : function (data) {
    // Some display stuff...
},

get_events: function() {
    var $this = this; 
    // Get messages for calendar
    $.getJSON("/ajax/get-events/", function(json){

        var new_events = json.data;
        // If events haven't changed, do nothing
        if ($this.events === new_events) {
            return true;
        }

        // Events have changed. 
        // Save new events
        $this.events = new_events;

        // Display new events
        $this.display_calendar_events(json);
    });

   },

}

edited Feb 13 '12 at 16:11

Felix Kling

795,719
175
1,089
1,143

answered Feb 13 '12 at 16:06

andreapier

2,958
2
38
50

I suggest to add comments instead of using `**`. – Felix Kling Feb 13 '12 at 16:09
You are right, that's why I never downvote for such little things, but leave a comment instead. Anyways, to avoid such situations, test your code before you post it. – Felix Kling Feb 13 '12 at 16:10

this.function is not a function error, but function exists

2 Answers2