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

Answer 1

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.