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?

Max Shawabkeh · Accepted Answer · 2010-04-28 17:17:33Z

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, 2010 at 17:17

Max Shawabkeh

38.7k10 gold badges85 silver badges92 bronze badges

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

2 Comments

DCD Over a year ago

I tried that but it didn't seem like obj was set inside the success function.

Max Shawabkeh Over a year ago

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?

Joel · Accepted Answer · 2010-04-28 17:18:36Z

4

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

answered Apr 28, 2010 at 17:18

Joel

19.4k3 gold badges67 silver badges84 bronze badges

Comments

s4y · Accepted Answer · 2010-04-28 17:21:04Z

2

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);
}
…

answered Apr 28, 2010 at 17:21

s4y

51.9k12 gold badges73 silver badges98 bronze badges

Comments

Matt · Accepted Answer · 2010-04-28 17:19:43Z

0

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.)

answered Apr 28, 2010 at 17:19

Matt

75.4k26 gold badges156 silver badges181 bronze badges

Collectives™ on Stack Overflow

Scoping inside Javascript anonymous functions

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related