1

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.

Meower68
  • 929
  • 9
  • 21
  • Given the fact you're including new elements into the document... maybe FF 3.5 can't handle more than one doctype and head stuff introduced into the main doc (my guess). So, you could do something like ***$("div#child_container").load("child_url #some_id_with_table_within");*** as JQuery documentation states, so you're only loading pertinent fragment... also, you'd need to include scripts and css calling into that fragment. – Alfabravo Dec 21 '11 at 14:30
  • Sounds like you are using sorttable.js from kryogenix.org. You might try switching to jQuery-based tablesorter.js from tablesorter.com. We use it on Firefox 3.6. – Vik David Dec 21 '11 at 15:38
  • Vik David -- tweaked my code to use jquery.tablesorter.js, as found on tablesorter.com. Same problem. Apparently, they share this issue. – Meower68 Dec 21 '11 at 22:48
  • Use the firebug console to manually fire the tablesorter event again, *AFTER* the load call completes. If that works, put the call in the callback function to $(load). – Vik David Dec 22 '11 at 15:02
  • Alfabravo -- if I understand correctly, my second "edit" on the original question should be equivalent to what you're suggesting. – Meower68 Dec 22 '11 at 15:51

1 Answers1

0

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.

Meower68
  • 929
  • 9
  • 21