Question

Here’s the thing: file a.php contains jQuery Tablesorter table.
This is the Tablesorter code:

 $("#feedsTable thead").live("click", function() {
       $("#feedsTable").tablesorter({
                widthFixed : true,
                dateFormat : "uk",
            }).tablesorterPager({
                container : $("#pager"),
                positionFixed : false
            });
        });

Slightly stripped table HTML code:

<div id="tablica">
    <article class="module width_full">
        <div id="pager">
            <form>
                [snip]tablesort pager stuff... 
            </form>
        </div>
        <table id="feedsTable" class="tablesorter" cellspacing="0">
            <thead>
                <tr>
                    [snip]table header row...
                </tr>
            </thead>
            <tbody> ... PHP printed table data

Also, file a.php contains refresh link, which, when clicked, calls b.php file which contains following code: $("#tablica").load("a.php #tablica"); (basically, b.php prints table with new elements and then replaces the old table with the new one using the load function).

Of course, I must use either jQuery live or delegate (having some kind of problems with this one, just can’t get Tablesorter to work, so I’m using live instead) function instead of (document).ready because once the load code is executed, Tablesorter will not work with the new table data.

But the problem is that when I use jQuery live() function, I need to click twice to be able to use the Tablesorter plugin. It’s like the first click only “activates” the plugin, and then, when table header is clicked for 2nd time, table is sorted and it works great.

In a.php, I can add this code

$(document).ready(function() {
    $("#feedsTable thead").click();
});

and it will “activate” the plugin and first user’s click on the table header will sort the table. But if I add $("#feedsTable thead").click(); to the b.php file and click refresh link, this “hack” does not work, and again two clicks are needed to be able to use Tablesorter plugin after the table with new data is loaded.

Basically, the question is: I would like Tablesorter to work on first click when using jQuery live, and not only on second. How to fix that?

Any help would be much appreciated!

Thanks.

Answer 1

So, delegate won’t work because it is targeting the table inside of #tablica which has all of its contents completely replaced by the load function. Delegate needs an “anchor” element to detect a bubbling event whereas live uses the document, I think. So, the way it is written, when the user clicks anywhere in the thead, tablesorter will initialize. Now a second click will actually sort the column because tablesorter is active.

Anyway, the solution would be to initialize tablesorter within the load callback function. So remove the live function completely and try just this:

$("#tablica").load("a.php #tablica", function(){
    $("#feedsTable").tablesorter({
        widthFixed : true,
        dateFormat : "uk",
    }).tablesorterPager({
        container : $("#pager"),
        positionFixed : false
    });
});

Now when the user clicks on the table header it will sort because tablesorter is initialized immediately after the content is loaded.