loading flot chart in jquery tab workaround doesn't completely fix the issue

Question

there is known issue with loading a flot chart in a jquery tab that is not the initial visible tab here:

this was asked here: http://osdir.com/ml/jQuery/2009-06/msg02284.html

and answered with this solution:

 .tabs-hide {
 /*display: none;*/
  position: absolute;
 left: -10000px;
 }

there is still some issues with this solution.

Lets say that the tab name that the flot chart is on is called #tab-1. jquery tabs put this in the URL string so this will work initially when you load up but if you try to send someone the URL with the #tab-1 (or any tab name in the URL) in the link, the chart will not be visible. has anyone seen a solution that always works including the case where the tab may be in the url as well.

Answer 1

For me, the chart worked when accessing the specific tab directly with the #tab-1 URL but not when the chart tab was not initially active.

I solved the problem by wrapping the chart generating call into the tab activation (1):

$('#tabs_container').bind('tabsshow', function(event, ui) {
  if (ui.panel.id == "tab-1") {
    $.plot(...)
  }
})

where '#tabs-container' and 'tab-1' are replaced with appropriate IDs. 'tabsshow' is the name of the event to bind to.

The only downside of this is that the chart is getting drawn again every time the tab is shown. For me it's not a big problem and one might circumvent it by e.g. using some flag vars to call $.plot() only once.

(1): the second tip in jQuery-ui docs

Answer 2

The main thing you need to remember is to place your tabs js at right before the end of the body tag.