Question

Possible Duplicate:
AJAX- response data not saved to global scope?

I basically have a loop that contacts a script on my site using AJAX and then updates a string with the response from that script. Here’s the code:

    // Image code array
    var result_url = 'http://localhost/view/';

    for(i = 0; i < urls.length; i++) {
        // Add URL to queue
        $('#url_queue').append('<div class="uploadifyQueueItem"><div class="cancel"><img src="/assets/img/cancel.png" /></div><span class="fileName">' + image_name_from_url(urls[i]) + '</span><div class="uploadifyProgress"><div class="uploadifyProgressBar"></div></div></div>');

        // Make a request to the upload script
        $.post('/upload', { url: urls[i], username: username }, function(response) {
            var response = jQuery.parseJSON(response);
            if(response.error) {
                alert(response.error);
                return;
            }
            if(response.img_code) {
                result_url += response.img_code + '&';
            }
        });
    }
    console.log(result_url);

The Firebug console just shows http://localhost/view/ when the string is logged. It’s like the img_code response from my upload script isn’t being appended to the string at all. I have tried logging the value of result_url within the $.post() method and that works fine, but the value is not being saved properly because it doesn’t show later in my code. Is this a scope problem? Will I have to define result_url as a global variable?

Thanks for any help.

Answer 1

You are checking console.log(result_url); before the AJAX requests complete.

---

AJAX requests are (by default) run asynchronously. What that means is that your script continues to run while the request is still being made to the server.

Your callback function (provided to $.post as the 3rd parameter) is the one that get’s executed after your AJAX request has completed.

---

Also note, that your AJAX request callback functions are called when the request is done. Your requests might not finish in the same order that they started. You could prevent all this by setting async:false, but that’ll halt all of your javascript execution.

---

Another option would be to collect the jqXHR objects being returned by $.post, and then call $.when().done(), so that your console.log(result_url) happens only when all the AJAX requests are resolved:

// Image code array
var result_url = 'http://localhost/view/',
    jqHXRs = [];

for(i = 0; i < urls.length; i++) {
    // Add URL to queue
    $('#url_queue').append('<div class="uploadifyQueueItem"><div class="cancel"><img src="/assets/img/cancel.png" /></div><span class="fileName">' + image_name_from_url(urls[i]) + '</span><div class="uploadifyProgress"><div class="uploadifyProgressBar"></div></div></div>');

    // Make a request to the upload script
    jqHXRs.push($.post('/upload', { url: urls[i], username: username }, function(response) {
        var response = jQuery.parseJSON(response);
        if(response.error) {
            alert(response.error);
            return;
        }
        if(response.img_code) {
            result_url += response.img_code + '&';
        }
    }));
}

$.when.apply(this, jqHXRs).done(function(){
    console.log(result_url);
});