jQuery tablesorter plugin does not work after AJAX call

Question

Hi,

I have used jQuery table sorter plugin in my code. It works fine as long as I don't make an ajax request to load the table data dynamically. I am using combo boxes to filter the contents of the table by ajax. I read few posts which says using $("table").trigger("update"); can solve my problem. I tried it with my code but the problem is still there.

Is there any other way to solve this problem? Please help me figure out a solution. I am really stuck bad. Any help would be appreciated. Below is my code :

$(document).ready(function () {
    $("#myTable").tablesorter({
        widthFixed: true,
        widgets: ['zebra'],
        headers: {
            0: {
                sorter: false
            }
        }
    }).tablesorterPager({
        container: $("#pager")
    });

    $("#tag").change(function (event) {
        $('#myTable').trigger("update");
        $("#myTable").tablesorter();
    });
});

Here tag is the id of a combo box named tag and myTable is the id of the table with sorter pager plugin.

Answer 1

It's unclear about the mechanism you're using to make the AJAX call but if it's the ASP.NET UpdatePanel, then you will need to rebind your jQuery events after the AJAX call is complete.

Add the following to your script

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(function(sender, args) {
    // Code to rebind your UI
});

Note: only works if you're using ASP.NET AJAX

Answer 2

The problem is that you're calling the $('#myTable').trigger("update"); code when the combo box changes, instead of when you get a response from your AJAX request. If you're using ASP.NET AJAX, try the code ericphan posted. If you're using jQuery AJAX, try something like this:

$.get('http://site.com/request-address', function(data) {

    // Code you're using to replace the contents of the table

    // Code to rebind the tablesorter
    $('#myTable').trigger("update");
    $("#myTable").tablesorter();
});

That way, you're rebinding the tablesorter to the new table contents, not the old contents which are about to be replaced.

Answer 3

The new DOM elements are not binded to the JavaScript events. jQuery handles a similar problem using it's 'live' function. Once the AJAX call has completed, rerun the javascript in document.ready().

Answer 4

I would wrap the tablesorter function in it's own function.

Then whenever you need to re run it - just call it again.

$(document).ready(function () {
    function resortTable(){ 
          $("#myTable").tablesorter({
            widthFixed: true,
            widgets: ['zebra'],
            headers: {
                0: {
                    sorter: false
                }
            }
        }).tablesorterPager({
            container: $("#pager")
        });
    }

        $("#tag").change(function() {
            resortTable();
        });
});

Answer 5

i would look into using the livequery plugin for this... it works miracles

http://docs.jquery.com/Plugins/livequery