FixedHeader and jQuery UI Tabs

mstone42

I'm developing a page that uses jQuery-ui Tabs. There are four tabs (all quite straight forward), and two of the tabs have a dataTable (and nothing else). Everything works fine until I add the FixedHeader plug-in to one of the tables - the header shows up on ALL the tabs (in the same place on the page)!

Also, if I resize the window when a tab is selected that isn't the one with the DT and FH (tab 3), the FH header moves to position (0,0). The header will pop back into its proper place if I select tab 3 and resize the window.
I tried removing the other DT just to make sure the FH wasn't confused, but it still happens. The other tabs are informational, so there shouldn't be anything conflicting there.

Just to see what would happen I added an FH to the other table. Things got really messy! Both headers appear on the page, regardless of which tab is selected. If neither tab with a DT is active when the page is refreshed, both headers show up at the top of the page! Resizing the window when a tab with a table is active, forces the header for that table into place, but the other header pops up to (0,0).

Looking at the DOM, I'm guessing this is a side effect of the fact that the FH definitions are at the bottom of the page, outside of any other blocks.

Here's my working solution so far:
[code]
// define first table and header
var oTable_1 = $('#dt_1').dataTable({ ... }); // the table
var fh_t1 = new FixedHeader( oTable_1 ); // the header
var fh1 = $("div.fixedHeader table#dt_1").parent().hide(); // get the header parent div and hide it

// define second table and header
var oTable_2 = $('#dt_2').dataTable({ ... }); // the table
var fh_t2 = new FixedHeader( oTable_2 ); // the header
var fh2 = $("div.fixedHeader table#dt_2").parent().hide(); // get the header parent div and hide it

// code to handle show/hide of fixedheaders via tab click
$('div.ui-tabs li a').click(function() {
fh1.hide();
fh2.hide();
var tab_active = $tabs.tabs('option', 'selected');
if (tab_active == 2) {
fh1.show();
oTable_1.Draw();
}
if (tab_active == 3) {
fhs.show();
oTable_2.Draw();
}
});
[/code]
Currently, this only works for FF3.6, not IE7 (what a surprise). In IE7, each of the two headers appear at the top of the page (0,0), except when their own tab/table is active, at which point the active header appears in the correct position.

We're using DT 1.6.2; FH 2.0.2; jQuery 1.4.2; jQuery-UI 1.8.1.

Anyone got a better fix?

--Mitch

SyahJordan

Oddly, Mitch's solution worked in IE8 on my local machine, but not on my server.
Another way to do this that does work with IE8 is to change the css value of the "fixedHeader" (or "fixedFooter", "fixedLeft", "fixedRight") class.

Keep in mind that this will not work with multiple tables with fixed headers on different tabs (unless you can dynamically add ids to all the fixed header divs).

I added my code to the "select" option when initializing the table.

[code]
var mainTabs = $("#MainTabs").tabs({
select: function(event, ui) {
//Here the table is on tab 0
if(ui.index == 0)
$(".fixedHeader").css("display", "block");
else
$(".fixedHeader").css("display", "none");
return true;
}
});
[/code]

UPDATE: I've switched to using another strategy as I ended up having some trouble with the fixed header's size if the window was resized while the page was on another tab. Since display:none makes the element as if it has no size, the fixed header cannot automatically resize itself when it is not being displayed.

To get around this I now remove all fixed headers every time I switch tabs and then if I am switching to a tab with a table that has a fixed header I add it again.

To remove a fixed header, all you need to do is remove all the fixedHeader class divs from the body.
[code]
$("body").children(".fixedHeader").each(function() {
$(this).remove()
});

[/code]

mstone42

My final solution was similar to Syah's - remove/recreate the FH each time a tab is selected. Since the FH is created only when the tab is selected (basically "on demand") page resizing isn't an issue.

[code]
var fh1 = null;
var fh2 = null;
function HandleFixedHeaders() {
// initially hide all FH objects
if (fh1 != null) { fh1.remove(); fh1 = null; }
if (fh2 != null) { fh2.remove(); fh2 = null; }

// now recreate the FH depending on which tab we're viewing
var tab = $tabs.tabs('option', 'selected');
switch (tab){
case 1 :
fh_1 = new FixedHeader( oTable_1 );
fh1 = $("div.FixedHeader_Cloned").children("table#dt_1").parent();
break;
case 2 :
fh_2 = new FixedHeader( oTable_2 );
fh2 = $("div.FixedHeader_Cloned").children("table#dt_2").parent();
break;
}
}
}

var oTable_1 = $('#dt_1').dataTable({ ... });
var oTable_2 = $('#dt_2').dataTable({ ... });

// initialize the appropriate FH
HandleFixedHeaders();

// bind the tab-click functionality
$('div.ui-tabs li a').click(function() {
HandleFixedHeaders();
}
[/code]