Scoping inside Javascript anonymous functions

Question

I am trying to make a function return data from an ajax call that I can then use. The issue is the function itself is called by many objects, e.g.:

function ajax_submit (obj)
{   
    var id = $(obj).attr('id');
    var message = escape ($("#"+id+" .s_post").val ());

    var submit_string = "action=post_message&message="+message;

    $.ajax({  
        type: "POST",  
        url: document.location,  
        data: submit_string,  
        success: function(html, obj) {
            alert (html);
        }  
    }); 

    return false;
}

Which means that inside the anonymous 'success' function I have no way of knowing what the calling obj (or id) actually are. The only way I can think of doing it is to attach id to document but that just seems a bit too crude. Is there another way of doing this?

score 7 · Accepted Answer · answered Apr 28 '10 at 17:17

7

You can use variables from the enclosing scope, a technique called "closure". So:

function ajax_submit (obj)
{   
    var id = $(obj).attr('id');
    var message = escape ($("#"+id+" .s_post").val ());

    var submit_string = "action=post_message&message="+message;

    $.ajax({  
        type: "POST",  
        url: document.location,  
        data: submit_string,  
        success: function(html) {
            alert(obj.id);  // This is the obj argument to ajax_submit().
            alert(html);
        }  
    }); 

    return false;
}

answered Apr 28 '10 at 17:17

Max Shawabkeh

37,799
10
82
91

I tried that but it didn't seem like obj was set inside the success function. – DCD Apr 28 '10 at 17:20
1

In your example there's a second argument to `success` called `obj` which shadows the original. Did you remove it like I did in the answer? – Max Shawabkeh Apr 28 '10 at 17:25

score 4 · Answer 2 · answered Apr 28 '10 at 17:18

4

If you are attempting to load html onto the page via ajax you may want to consider the load() function.

answered Apr 28 '10 at 17:18

Joel

19,175
2
63
83

score 2 · Answer 3 · answered Apr 28 '10 at 17:21

Functions in JavaScript become enclosed in the scope in which they are defined (this is a closure). In this case, a new anonymous success callback function is created every time ajax_submit() is called, so all the variables from the parent scope will always be accessible.

Your code should work just fine as is. If you want to have a callback function, it can be passed as an argument to ajax_submit() and called like this:

…
success: function(html, obj) {
    callback(html);
}
…

score 0 · Answer 4 · answered Apr 28 '10 at 17:19

The variables obj, id and message are all available within the anonymous function.

This is because of a feature in Javascript called closures, which I advise you read up on.

The general gist of a closure is that a function will forever have access to the variables that were present in the scope it was defined in.

The result of this is that you can do:

    success: function(html) {
        alert (id);
        alert (obj);
    }

all day long (but note that the obj parameter in the success function will take precedence over the obj variable in your ajax_submit function.)

Scoping inside Javascript anonymous functions

4 Answers4