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

• Josh Mein: Just to note. This is a small thing and can be seen as my preference, but it is always worth the time to come up with good variables names. It can be frustrating to someone who has to come after you and all they see is one character variable names. I would make a better variable name in my answer, but I dont know your scenario.

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

• dontHaveName: yeah, but if I did this, I will dont have data in every created div only in the last because for() will be faster
• James Allardice: You will need to wrap the ajax call in a closure to capture the value of a at each iteration.
• dontHaveName: you think $("div").each(function(){ ajax }); ? if yes I tried it but it doesnt work too :(
• Tamkeen: @dontHaveName put $(".div").append("<div id='"+a+"'></div>"); inside the success function hope you will get required output.
• dontHaveName: @Josh Mein i have that code in function too, so i create new function id() and add there your code and after appending i am calling id() but still doesnt work

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