jQuery tablesorter extension problem with multiple clicks?

Question

Ok, I have a table, made by a GridView, and attached a tablesorter to it, it works just fine.

Then I put it inside an updatepanel, and added the code to rebind it on a postback, here is my script:

function loadEvents() { $("table[id$='gv']").tablesorter(); }
$(document).ready(function() { loadEvents(); });
function reBind() {
    if (Sys.WebForms.PageRequestManager) {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function() { loadEvents(); });
    }
}

Which works great, I load the gridview, sorting works.

• I click a button that posts back, it works fine.
• I click again and the first click works to sort, sorting it up, but it gets stuck - there - I can change columns, but it will never sort down? But then...
• I click again, and it works fine

This continues on, working every-other click... any ideas?

Answer 1

Your problem sounds like a server side issue - the sort only works after the table has been bound in the same request. Otherwise the event hook-up for the sort can't find anything.

Of course - if you have already bound the table it's already been sorted - so now you have to get the data again.

This sort of issue is a common problem with the horrible .Net page event model.

Simplest fix is to make sure that your table is rebound on the ajax postback after viewstate has been loaded but before events fire, then get the data again after the event has fired. Problem is that then you've got your data twice.

A better fix is to avoid using .Net's event hook-ups in any dynamic page elements.

These types of problems with the .Net page event model is part of the reason there's so much interest in MVC.