Jquery each not continuing after ajax $.post

Question

My jQuery each seems to be stopping until the ajax request has loaded. What is the problem here I thought ajax was async?

code:

$('div').each(function(){

    if($(this).attr('id')){
        var that = this;
        $.post('application/views/dashboard/dashboard.php?component='+$(this).attr('id')+"&settingid="+settingId, function(response){
            $(that).html(response);
            $(window).trigger('resize');
        });
        settingId++;
    }
});

There is a limit to the number of simultaneous calls. How many are you trying to send? — iCollect.it Ltd, Sep 22 '14 at 11:28
@TrueBlueAussie 4 but the second is a slower call and then it won't execute call 3 and 4 — Stijn Bernards, Sep 22 '14 at 11:30
Do you need to run in parallel or sequentially, or "don't care, just tell me when they are all done"? — iCollect.it Ltd, Sep 22 '14 at 11:35
well I just want the responses to be placed in a div and when 1 response is taking langer the divs html is loading... but if one response takes long to load the each stops and waits — Stijn Bernards, Sep 22 '14 at 11:39

iCollect.it Ltd · Accepted Answer · 2014-09-22T11:50:30.487

1

$.when will wait on all async calls to complete (order and timing unimportant), then can perform a single extra operation at the end (in addition to the individual operations). You will need to use $.ajax instead of the simpler $.post:

var requests = [];
$('div').each(function () {
    if ($(this).attr('id')) {
        var that = this;
        requests.push($.ajax({
            url: 'application/views/dashboard/dashboard.php?component=' + $(this).attr('id') + "&settingid=" + settingId,
            type: "post",
            success: function (response) {
                $(that).html(response);
            }
        }));
    });
    settingId++;
});
$when(requests).then(function () {
    $(window).trigger('resize');
});

$.when works by taking an array of jQuery promises (in this case ajax promises) and awaiting a success from them all.

apologies for any typos in the above code. I just wrote is direct into the answer :)

You can of course simplfy the code from this:

$('div').each(function () {
    if ($(this).attr('id')) {

to this:

$('div[id]').each(function () {

edited Sep 22 '14 at 11:50

answered Sep 22 '14 at 11:41

iCollect.it Ltd

92,391
25
181
202

Hang on while I fix some of the {}() errors and I'll try it out – Stijn Bernards Sep 22 '14 at 11:46
Hmm still getting the same outcome if request 2 is loading 3 and 4 aren't being executed. if 2 has loaded 3 and 4 will execute. – Stijn Bernards Sep 22 '14 at 11:49
Your browser is only processing 2 request at a time (max) so that is expected. What would you like to happen with the 4 results? – iCollect.it Ltd Sep 22 '14 at 11:51
they're being displayed in a table – Stijn Bernards Sep 22 '14 at 11:54
Can't do better than 2 at a time. You can change the priority/order, or make them *all* load sequentially, but not load all 4 at once. Would it help if you just show all 4 results at the end of all loads? – iCollect.it Ltd Sep 22 '14 at 11:57
oh one last thing it looks like my browser is only executing 1 request instead of 2 – Stijn Bernards Sep 22 '14 at 11:58
The number of requests is browser, but 1 seems a bit ridiculous. Run the F12 Chrome browser tools (network tab) or Fiddler2 and see what is going on at the raw request level. – iCollect.it Ltd Sep 22 '14 at 13:04
Well it just looks like the .each is halted until the ajax request is finished – Stijn Bernards Sep 22 '14 at 13:19

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Take a look here and here. It is two different solutions.

It's just rewrite all your response. Try to store them in array, or use async: false, which make all your request work in queue.

edited May 23 '17 at 12:05

Community

1
1

answered Sep 22 '14 at 11:32

aleha_84

8,309
2
38
46

3

Never suggest `async: false` as a solution! That is a really bad idea and leads to far more problems than it solves. – iCollect.it Ltd Sep 22 '14 at 11:34
I agree with that, but is is one of possible solutions, and sometimes it work. – aleha_84 Sep 22 '14 at 11:56
Always best to find out the actual cause of the problem. *Anything* is a better solution than `async: false`. You first link is a good answer though. – iCollect.it Ltd Sep 22 '14 at 13:06
@TrueBlueAussie have you mentioned word 'different'? – aleha_84 Sep 22 '14 at 13:17

score 0 · Answer 3 · answered Sep 22 '14 at 11:36

0

Use $.ajax() instead of $.post. As, it has got lot many configurable paramenters. Here you can use Promise pattern.

answered Sep 22 '14 at 11:36

maddy

117
7

Jquery each not continuing after ajax $.post

3 Answers3