Question

I’m using JQuery 1.6 and the latest tablesorter (sorttable) I can find. I have one page which does a

$("div#child_container").load(child_url);

where the page referenced by “child_url” has a sorttable in it.

In FireFox 8, this works exactly as you would hope. I have a sortable table embedded in a div.

In FireFox 3.5, it does not work. The column headings are not clickable. They’re plain text. The zebra styling isn’t happening, either, nor is the initial sort. Running FireBug shows that it loads the child_url (it loads the table of data, so this is confirmed) and it loads the sorttable.js file. There are no errors. Any warnings are CSS-related.

I can load the child_url on FireFox 3.5 and it will work exactly as you’d expect, so this doesn’t appear to be a tablesorter issue per se. It seem to be an issue with doing a JQuery .load() to include a page which uses tablesorter.

I’m open to suggestions on how to proceed. Other than just saying “Sorry, but your browser is just too old and busted.”

Edit: I’ve switched to jquery.tablesorter.js. Same issue.

Edit: I modded my child_url page so that it didn’t provide a doctype, head, etc. It just provided the <table> and a <script> block which would call $("#tablediv").tablesorter( ... ) on it. I promoted the .js file load to the parent page. That misbehaved, identically, on 3.5 and 8.0. I had a javascript error on the .tablesorter() call, which I never had before.

Answer 1

First off, if there’s some way to credit Alfabravo, I’d do so. While his comment didn’t solve the problem completely, it put me on the right track.

I stripped down the child_url page so that it ONLY provided a <table>. I pulled the jquery.tablesorter.js up to the parent page. I needed the parent page to execute .tablesorter() on the table.

$("div#pending").load(
    "pending.jsp", 
    function() {
        $("table#pending_records").tablesorter( {
            sortList: [[4, 0]],
            widgets: ["zebra"]
        } );
    } 
);

JQuery.load() allows you to specify a URL to load AND a callback to execute when it’s completely loaded. That was the secret sauce needed to get past the Javascript error mentioned in my second edit.

On another note: I was actually loading two sorttables in two different tabs using jquery.ui.tabs.js. The second tab wasn’t behaving either. That’s because sorttable doesn’t work if it’s in a block which is display: none. When the page loaded:

• the first tab’s contents were visible, so the content there rendered
  properly
• the second tab’s contents were hidden, so it was loading the
  content but .sorttable() wasn’t executing, so it didn’t render properly

I was able to use a hack mentioned on the JQuery.load() doc page to get around that. Basically, tweak the stylesheet so that instead of:

.ui-tabs .ui-tabs-hide { display: none; }

it has:

.ui-tabs .ui-tabs-hide { position: absolute; left: -10000px; }

Since the frame containing the content is being “displayed” (albeit off the screen), .sorttable() works as you expect it to.