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

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. — Josh Mein, Jun 28 '12 at 14:56

score 27 · Accepted Answer · edited May 23 '17 at 11:51

27

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

edited May 23 '17 at 11:51

Community

1
1

answered Jun 28 '12 at 14:38

Josh Mein

28,107
15
76
87

1

yeah, but if I did this, I will dont have data in every created div only in the last because for() will be faster – dontHaveName Jun 28 '12 at 14:42
2

You will need to wrap the `ajax` call in a closure to capture the value of `a` at each iteration. – James Allardice Jun 28 '12 at 14:44
you think $("div").each(function(){ ajax }); ? if yes I tried it but it doesnt work too :( – dontHaveName Jun 28 '12 at 14:47
@dontHaveName put `$(".div").append("
");` inside the success function hope you will get required output. – Tamkeen Jun 28 '12 at 14:51
@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 – dontHaveName Jun 28 '12 at 15:02
@donthaveName The code I added in the form of `(function(id) {...})id));` is known as a closure. It needs to remain in that format in order to work. I have updated my answer with a link to a good question that describes closures in detail. I dont really understand what you are describing as your changes. You should not have to make any other than change variable names. – Josh Mein Jun 28 '12 at 15:09
@JoshMein You made my day..was facing a similar problem. I had no idea about closure. Your answer rocked. Thanks. – Monodeep Nov 17 '12 at 19:23

score 1 · Answer 2 · edited Jul 16 '13 at 10:10

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

jquery ajax() async false

2 Answers2

Linked