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

Alternatively, change the css of the tab content class to...

.tab_content {
 display:block;
    visibility:hidden;
}

... and add the following added lines (under the //HACK!!! ... ) to your jscript.js file..

    $(document).ready(function() {
        //  When user clicks on tab, this code will be executed
        $("#tabs li").click(function() {
            //  First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //HACK!!! As the tabs_content HAS to initially be set to display:block in order for the flot graphs to be plotted correctly,
        // we need to manually change the visibility attribute for the tabs_content each time another tab is selected as active.
        //This assigns a variable to the tab_content of the currently active tab and changes the css visibility attribute to hidden.
            var old_tab = $("#tabs li").find("a").attr("href");
            $(old_tab).css('visibility', 'hidden');

            //  Now add class "active" to the selected/clicked tab
            $(this).addClass("active");

            //  Hide all tab content
            $(".tab_content").hide();

            //  Here we get the href value of the selected tab
            var selected_tab = $(this).find("a").attr("href");
//HACK!!! Change the css visibility attribute of the newly selected tab to visible
            $(selected_tab).css('visibility', 'visible');

            $(selected_tab).fadeIn();

            return false;
        });


});

... and providing your aspx looks like ...

    <div id="tabs" >
                        <ul id="Ul1" >
                                <li class="active"><a href="#tab1">Main</a></li>
                                <li><a href="#tab2">tab2</a></li>
                                <li><a href="#tab3">tab3</a></li>
                                <li><a href="#tab4">tab4</a></li>
                                <li><a href="#tab5">tab5</a></li>
                            </ul>
         </div>

         <div style="width:100%;float:left;">     
                  <div id="tabs_content_container">

                           <div id="tab1" class="tab_content" style="visibility:visible">
                           content for tab 1
                            </div>
                            <div id="tab2" class="tab_content"  >
                             </div>
                  </div>
         </div>

... your flot graphs will display correctly and when the relevant tab is selected!

Answer 3

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