Passing a reference to an object to a callback function in jQuery

Question

Possible Duplicate:
$.ajax context option

I've got some code that looks like this:

$.post(self.baseUrl + 'api/method',
        {param1: data},
        function (response) {
            // Do something
        });

I want to pass a reference to the self object through to the callback, which I imagined would be something like this:

$.post(self.baseUrl + 'api/method',
        {param1: data},
        function (response, self) {
            // Do something
        });

However, it doesn't work like this, the jQuery documentation doesn't show a way that would make this possible and a cursory Google search hasn't turned up anything. Is this possible, and how can I do so?

@jhonraymos Call the method that contains this code recursively — Matthew Daly, Sep 20 '12 at 11:30
@AndreasNiedermair I've voted against closing this one - it's asking a very similar thing, but the question has come from a different direction. This question needs an answer that explains that there is a context option, while the proposed duplicate is asking how to use that context. — Keith, Sep 21 '12 at 07:34

score 5 · Accepted Answer · answered Sep 20 '12 at 11:24

5

If you use the $.ajax method you can specify a context:

$.ajax({
    type: "post",
    context: self,
    data: {param1: data},
    success: function (response) {
        console.log(this); // now 'this' refers to self

    }
});

answered Sep 20 '12 at 11:24

karim79

339,989
67
413
406

Thanks. that's exactly what I was after. – Matthew Daly Sep 20 '12 at 11:31

score 1 · Answer 2 · answered Sep 20 '12 at 11:34

@karim79 shows the best solution. I just want to show some other possible ways

var App = {
    baseUrl: "http://.../",
    fetchData: function() {
        var self = this;
        $.post(self.baseUrl + 'api/method', {
            param1: data
        }, function(data) {
            self.onDatafetch(data);
            //or
            globalDataFetch(data, self);
        });
    },
    onDatafetch: function(data) {
        this.showMsg();
    },
    showMsg: function() {
        alert("Success");
    }
}

App.fetchData();

function globalDataFetch(data, object){
   // received data and object
}

score 0 · Answer 3 · answered Sep 20 '12 at 11:22

0

why do you want to do sth like that?

you could easily use a closure:

var param1 = data;
$.post(self.baseUrl + 'api/method', function (data) {
    // access param1 here
});

answered Sep 20 '12 at 11:22

This is inside a method of the object represented by the self variable, and inside the callback I actually call this method recursively, so I need to pass a reference through. – Matthew Daly Sep 20 '12 at 11:25
actually you do not need a reference if you are after calling recursively. just remember the paradigm: each variable of a scope is available from every line (in that scope), no matter where it gets declared - this is because the compiler moves the declaration to the top (but not the assignment, which might be done later) - see this example http://jsfiddle.net/dittodhole/x359K/ – Sep 20 '12 at 11:26
btw... recursion can be, not in every case, replaced by a stack - so that might be the better option to implement ... – Sep 20 '12 at 11:32
nevertheless: you do not need a `context` - this can be done with closures! just introduce a new variable (and see my fiddle for further hints) ... – Sep 20 '12 at 11:41

Passing a reference to an object to a callback function in jQuery

3 Answers3