jquery ajax() async false

Question

i have problem..

for(a=1;a<10;a++){
    $(".div").append("<div id="+a+"></div>")
        $.ajax({
              url: "file.php",
              data: "a="+a,
              type: "POST",
              async: false,
              success: function(data) {
                $("#"+a).html(data);
              }
        });

}
 $("div").click(function(){
        alert("it works");
 });

problem is: is I didn't put there async: false data from file.php are only in last div so with id 9 but now there is async: false - so data are in every div so that is good

but if i want click while it was loading by ajax it doesn't work (only after finished all ajax-es)

how resolve this problem? (maybe the false is that am I using ajax. I can use getJSON ect..)

thanks for helping

Answer 1

If you want the user to be able to use the interface while the ajax call is running, you should change your async to true. It has also been noted by James Allardice that in this scenario you need to use a javascript closure to retain the value of your original id for when the ajax call is returned. For more information regarding javascript closures check out how-do-javascript-closures-work, a really good question found here on stackoverflow.

for(id = 1; id < 10; id++){
    $(".div").append("<div id='" + id + "'></div>");

    (function(id) {
        $.ajax({
            url: "file.php",
            data: "a=" + id,
            type: "POST",
            async: true,
            success: function(data) {
                $("#"+ id).html(data);
            }
        });
     }(id));
}

Answer 2

A good solution to this is to use a recursive function.

function appendDivs(limit, count) {
    count = count || 1;
    if (count <= limit) {
        $(".div").append("<div id=" + count + "></div>");
        $.ajax({
            url: "file.php",
            data: "a=" + count,
            type: "POST",
            async: true,
            success: function(data) {
                $("#" + count).html(data);
                appendDivs(limit, count + 1);
            },
            error: function(e) {
                alert('Error - ' + e.statusText);
                appendDivs(limit, count + 1);
            }
        });
    } else {
        return false;
    }
}
appendDivs(10);