jquery .each() .load() wait for completion

Question

I'm loading rows into a table using jquery and I want to know how I can make them load one by one; i.e. the second block should only start to load once the first has finished loading.

My table looks a bit like this:

<table id="dynamicTable">
  <thead>
    <tr>
      <th>Heading</th>
      ...
    </tr>
  </thead>
  <tbody id="1">
  </tbody>
  <tbody id="2">
  </tbody>
</table>

And my jquery looks a bit like this:

$("table#dynamicTable tbody").each(function() {
  $(this).load("filethatgeneratestablerows.php");
});

(it's a little more complicated than this as it generates content based on the tbody id and also includes a checkbox system to choose which tbody elements you want to affect, but that all works fine and so I've stripped it down to make my actual question more obvious!)

You can't use `$.each` if you want them to load in 1 by 1 efficiently (at least, not without a queue-like system). why do you want to load each row individually? that's a lot of requests.. — Kevin B, Oct 01 '12 at 14:49
@Shmiddty: "I want to know how I can make them load one by one" - That's the question. Seems like a pretty straightforward question to me. Looks like all that's needed is an explanation of how asynchronous calls work and how to work around that to get it to do what he wants. — Travesty3, Oct 01 '12 at 14:51
Thanks for the suggestions everyone, I've implemented @user1689607's answer and it's working a treat. — user1187347, Oct 01 '12 at 15:09

score 5 · Accepted Answer · answered Oct 01 '12 at 14:57

5

var bodies = $("table#dynamicTable tbody"),
    i = 0;

(function loadBody() {
   bodies.eq(i++).load("filethatgeneratestablerows.php", loadBody);
})();

This calls load on each index of the collection one at a time. When one load is done, it calls loadBody again, using the incremented index.

When i is greater than the last one, .eq() will return an empty jQuery object, so the sequence will end there.

answered Oct 01 '12 at 14:57

I Hate Lazy

47,415
13
86
77

1

Neat. I was thinking of something similar, but your solution is way more elegant. – FixMaker Oct 01 '12 at 15:00
This looks like it's what I was after - I'll try it now – user1187347 Oct 01 '12 at 15:03

jholloman · Answer 2 · 2012-10-01T15:34:36.527

1

You'll need to make an array to store the various tbodies. Start with the first and run a load. On complete pass the array with the first taken out. So you pass around like so:

[1, 2, 3, 4] [2, 3, 4] [3, 4] [4] []

And you keep calling a load function that takes in an array, loads the first element, and passes the remaining elements or breaks on none.

EX:

loadElement( $("table#dynamicTable tbody") );

function loadElement( $elements ) {
    $elements.load( "filethatgeneratestablerows.php",
            loadElement( $elements.filter(":gt(0)") ) );
}

edited Oct 01 '12 at 15:34

answered Oct 01 '12 at 14:51

jholloman

1,959
14
16

I think this is a good answer, but I think you should elaborate with a code sample. – Travesty3 Oct 01 '12 at 14:53

score 0 · Answer 3 · answered Oct 01 '12 at 14:51

0

You could do a

$("table#dynamicTable #1").load("filethatgeneratestablerows.php", function(event) {
     $("table#dynamicTable #2").load("filethatgeneratestablerows.php", function(event) {
        ....
     });
  });
});

not tested but you should get the point

answered Oct 01 '12 at 14:51

23tux

14,104
15
88
187

as jholloman said you could also store your selectors into an array, iterate over it, and at every complete fire the next .load. Or have a look here for synchronous ajax: http://stackoverflow.com/questions/133310/how-can-i-get-jquery-to-perform-a-synchronous-rather-than-asynchronous-ajax-re – 23tux Oct 01 '12 at 14:53

jquery .each() .load() wait for completion

3 Answers3

Linked

Related