CODEWITHSUNDEEP
jqueryajaxjquery-pluginstablesorter
Ela
Ela

Reputation: 31

jQuery tablesorter plugin does not work after AJAX call

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.

Upvotes: 3

Views: 5638

Answers (6)

ragerory
ragerory

Reputation: 1378

I know this is an old post, but maybe my answer will help someone else googling this same problem. I fixed this problem by calling

$('#myTable').tablesorter();

again right after my AJAX call.

Upvotes: 0

Rod Johnson
Rod Johnson

Reputation: 2427

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

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

Upvotes: 0

rob_james
rob_james

Reputation: 1322

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();
        });
});

Upvotes: 1

Curt Hostetter
Curt Hostetter

Reputation: 11

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().

Upvotes: 1

Alex King
Alex King

Reputation: 2908

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.

Upvotes: 0

ericphan
ericphan

Reputation: 267

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

Upvotes: 1

Related Questions