Mysql PHP generated table: doesn't work with Tablesorter

Question

I found this great Tablesorter plugin for jQuery but I can't make it work with my PHP generated table. Here's the code:

<script type="text/javascript">


    function table() {

        $("#container").load("table.php?randval="+Math.random());

    }


    $(document).ready(function() { 

        table();
        $("table").tablesorter(); 
   }); 

</script>

Where #container is the div where the table will be and table is the name of the table. I get the table loaded but sorting function is not working.

It works if I put the table directly in html in the page.. but I don't see the point in having a static table for sorting.

Any help would be very appreciated.

Answer 1

$.load() performs a asynchronous request, i.e. the function does not wait for the data to arrive before returning. Therefore $("table").tablesorter(); is executed most likely before the table is added to the document. Either make it a synchronous call or (even better) pass a handler for the complete event to load.

http://api.jquery.com/load/:

.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
url A string containing the URL to which the request is sent.
data A map or string that is sent to the server with the request.
complete(responseText, textStatus, XMLHttpRequest) A callback function that is executed when the request completes.

<script type="text/javascript">
  $(document).ready(function() { 
    $("#container").load(
      "table.php?randval="+Math.random(),
      null,
      function (responseText, textStatus, req) {
        $("table").tablesorter();
      }
    );
  }); 
</script>