Question

Please take a look at the following example:

http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

In the first example, the hidden graphs are plotted by catching the “tabshow” event and finding which tab was selected:

$('#tabs').bind('tabsshow', function (event, ui) {
    if (ui.index === 1 && plot1._drawCount === 0) {
        plot1.replot();
    } else if (ui.index === 2 && plot2._drawCount === 0) {
        plot2.replot();
    }
});

This works fine but if you added more tabs and moved your plots to other tabs, you’d have to manually update the hard coded “ui.index” values, which I’d like to avoid in my project.

Does anybody know a good way to programmatically find under which tab your plot exists? I’d like to code in such a way that it doesn’t matter how many tabs you have and where you place your plot.

Answer 1

You have to approach it in the following way:

1. Take the chart id you want to find from somewhere.
2. Use jQuery to select the chart.
3. Find its parent using parent() method — this is the tab containing it.
4. Use attr('id') of the parent to get its id.

This is how I show it in jsfiddle sample available here.

EDIT

From what I understand you want to get the index of selected tab, which is effectively ui.index. Since I couldn’t find a ready method in the jQuery UI, this is how I achieved it (this code is also added to the previous jsfiddle sample):

    var tabIndex = -1;
    $("#tabs ul li").each(function(index){
        if('#'+tabId === $(this).find("a").attr('href')){
            tabIndex = index;
            return false;
        }
    });