Question

I have a jquery function that takes the data from the 3rd column of a table – runs a function on it – and then replaces the field with the result.

Here’s my code:

function getData() {

    $('#tab1_response').html("<img src='images/ajax-loader.gif' border=0> Please wait...").show();

    $('#myTable tr').each(function(index){
        var col1 = $(this).children('td.col1').text();
        $(this).children('td.col3').load('doStuff.php?url='+col1);
    });

    $("#myTable").trigger("update");
    $('#tab1_response').fadeOut(2000);
}

For some reason the last two lines:

$("#myTable").trigger("update");
$('#tab1_response').fadeOut(2000);

Don’t wait for the .each(function… to complete before running…

Instead the “Please wait…” loader doesn’t appear and my table doesn’t update meaning the new column isn’t sortable (I’m using tablesorter for jquery found here – http://tablesorter.com/docs/).

The function does otherwise work and I can see my 3rd column updating with new data.

Is there a simple fix for this???

I hope I’ve provided enough details but please let me know if you need more information 🙂

Answer 1

You have to use the callback in .load(), but only when you hit the last row. Rewrite your code like this.

function getData()
{
  $('#tab1_response')
    .html("<img src='images/ajax-loader.gif' border=0> Please wait...")
    .show();

  var rows = $('#myTable tr').length;

  $('#myTable tr').each(function(index)
  {
    var tr   = $(this),
        col1 = tr.children('td.col1').text();

    if ( (index+1) === rows) //last row, use callback to update table and fade img
    { 
      tr.children('td.col3').load('doStuff.php?url=' + col1, function(){
        $("#myTable").trigger("update");
        $('#tab1_response').fadeOut(2000);
      });
    }
    else //
    {
      tr.children('td.col3').load('doStuff.php?url=' + col1);
    }
  });  
}

Warning I gave you an answer to your problem, but I’m with Dean Harding on the warning, doing one request per row is not a good idea. You should find a way to improve that (hint, use JSON 😉