Column Headings not visible after refresh while table not visible

codecraig

I am using jQuery UI Tabs (http://jqueryui.com/demos/tabs/). In the first tab I have my table (using datatables) and in the second tab I have a chart (using g.raphael).

I have a search form above my tabs. When a search is performed, data comes back and the table is refreshed. This all works fine if the "table" tab is visible when the data is refreshed. However, if I am viewing the "chart" tab and data comes back when I go to the "table" tab, the data has been updated but the column headings are not visible (except for the 1st column). Using firebug I can see the columns exist, their labels are there, styles look ok (i.e. display != none), etc.

Any ideas?

I will say that I am updating the table with new data via this: table.oApi._fnAjaxUpdateDraw(table.fnSettings(), data)

I'm doing this b/c I want a server-side/ajax type of table, except I need to handle when to fetch the source data and determine what to do when results come back (however, i still want the table to handle fetching pages, doing sorting, etc on the server side).

Any clues as to what's happening?

codecraig

So here's my workaround. When the "table" tab is being shown (i'm listening for the event from the jQuery Tabs widget), I am doing something like this:

[code]
var oSettings = $.app.table.fnSettings(); // $.app.table is a reference to the datatable
oSettings.bAjaxDataGet = false;
$.app.table.oApi._fnDraw(oSettings);
oSettings.bAjaxDataGet = true;
$.app.table.oApi._fnProcessingDisplay(oSettings, false);
[/code]

This seems to work well enough as a workaround. FYI, this block of code was taken from the end of the "_fnAjaxUpdateDraw" function.