jquery tablesorter + ajax div content update problem

Question

I'm having trouble with my tablesorter and ajax div content update. Once the ajax is reloaded all the tablesorter functionalities are lost. I've tried livequery but it doesn't seem to work beyond first listing of the table.

<script type="text/javascript">
    $(document).ready(function(){
        $(".tabs > ul").tabs();
        $("#sortabletable").tablesorter({
            headers: {
                4: { sorter: false },
                5: { sorter: false }
            },
            widgets:['zebra'],
            sortlist:[[0]]
        });
    });
    $("#sortabletable").livequery(function(){
       $(this).tablesorter({
            headers: {
                4: { sorter: false },
                5: { sorter: false }
            },
            widgets:['zebra'],
            sortlist:[[0]]                          
       });
    });

</script>


// The AJAX function...
function AJAX(){
   try{
       xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
       return xmlHttp;
   }
   catch (e){
       try{
           xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
           return xmlHttp;
       }
       catch (e){
           try{
               xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
               return xmlHttp;
           }
           catch (e){
               alert("Your browser does not support AJAX.");
               return false;
           }
       }
   }
}

// Timestamp for preventing IE caching the GET request (common function)
function fetch_unix_timestamp(){
   return parseInt(new Date().getTime().toString().substring(0, 10))
}

////////////////////////////////
//
// Refreshing the DIV TIMEDIV
//
////////////////////////////////

function events_listings(){

   // Customise those settings
   var seconds = 5;
   var divid = "tab01";
   var url = "events_listings.php";

   // Create xmlHttp
   var xmlHttp_one = AJAX();
     // No cache
   var timestamp = fetch_unix_timestamp();
   var nocacheurl = url+"?t="+timestamp;

   // The code...

   xmlHttp_one.onreadystatechange=function(){
       if(xmlHttp_one.readyState==4){
           document.getElementById(divid).innerHTML=xmlHttp_one.responseText;
           setTimeout('events_listings()',seconds*1000);
       }
   }
   xmlHttp_one.open("GET",nocacheurl,true);
   xmlHttp_one.send(null);
}

// Start the refreshing process
window.onload = function startrefresh(){
   setTimeout('events_listings()',seconds*1000);
}

////////////////////////////////
//
// Refreshing the DIV TIMEINWASHINGTON
//
////////////////////////////////
var formvar = "";
function view_job(temp){

   // Customise those settings
   var seconds = 8;
   var divid = "tab02";
   var url = "view_job.php";
   formvar = temp;

   // Create xmlHttp
   var xmlHttp_two = AJAX();

   // No cache
   var timestamp = fetch_unix_timestamp();
   var nocacheurl = url+"?t="+timestamp+"&"+formvar;
       // The code...
   xmlHttp_two.onreadystatechange=function(){
       if(xmlHttp_two.readyState==4){
           document.getElementById(divid).innerHTML=xmlHttp_two.responseText;
           setTimeout('view_job(formvar)',seconds*1000);
       }
   }
   xmlHttp_two.open("GET",nocacheurl,true);
   xmlHttp_two.send(null);
}

// Start the refreshing process
window.onload = function startrefresh(){
   setTimeout('view_job(formvar)',seconds*1000);
}

Answer 1

After loading the result, you need to do 5("#table").tablesorter() once more to re-sort it. Also, rather than writing your ajax code by hand, use $.get or $.post from jquery

Answer 2

Found a solution by using jQuery .ajax function. much easier, and works perfectly.

Answer 3

Your original issue was that Live Query can only detect changes to the document that started with a jQuery call.

Directly setting innerHTML will not cause it to fire. Changing that line to $("#"+divid).html(xmlHttp_one.responseText) would have solved your problem.

I'm glad to hear that you found a solution! Be aware, however, that Live Query has to scan the document every time it is modified — which is convenient but comes with a big performance hit. It would be better to put the call to tablesorter() in your jQuery.ajax(success:) function.

Answer 4

Hi,

I am quite new in java/ajax programming, but have exactly the same problem - when I update the content of a div (using ajax) with my table, tablesorter does not function. If I load the table directly to the very first page (not into a div), tablesorter works perfectly.

So, I would be greatful if you can explain in more details how exactly you modified your code to solve it.

Thanks, Bojan

Answer 5

Instead of calling .tablesorter() again, you can trigger an update instead, without any of the overhead of calling .tablesorter():

("#table").trigger("update");

I've used this successfully in my own project. You can make the trigger() call in your :success handler.

HTH

Answer 6

As mentioned using the jquery AJAX call is the best way to go :P but I found the post to be a bit vague for newbies so here's the code that i used in my project:

    $('input.user').click(function() {
 var getContact = $(this).val();
 $.ajax({
  url: 'contact_table.php',
  data: 'userID='+getContacts,
  success: function(result) {
   $('#UserContactTable').append(result);
   $("#contact-list").tablesorter();
  }
 });
});