Question

Possible Duplicate:
How to return the response from an AJAX call from a function?

I’m trying to get some HTML content via ajax. But for some reason, though the HTML makes it to the ajax function, when I try to use it as a returned value, I get undefined.

Like this:

function get_additional_options(name) {

    var post = $.ajax({
            type: 'post',
            url: 'order_queries_templates/html/' + name + '_additional_options.php?<?=time()?>',
            //data:'product_id=' + product_id,
            dataType: 'html'

            });

    post.done(function (p) {
        console.log(p); //prints out all the HTML just as I would expect
        return p;
    });
}

but when I try to get the HTML to append it to my page like this

if (has_additional_options == "t"){
    var html_to_append = get_additional_options(name);
    console.log(html_to_append); // undefined

}

It is the same result if I use the done() method, or just return the value as a success callback. What is my error?

Answer 1

You can’t return values from asynchronously called functions.

You should return post (i.e. the result of $.ajax) and then register a .done handler outside of your function:

function get_additional_options(name) {
    return $.ajax({
        ...
    });
};

if (has_additional_options == "t") {
     get_additional_options(name).done(function(p) {
         console.log(p);
     });
     // NB: code execution continues here immediately - don't do anything
     //     else here - all further stuff must be done in the above callback
 }