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?

Answer 1

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