set tab in javascript

If you just need to run the code when the page is first loaded, then run it on page load, e.g.

var runOnTabActivate = function(){
    // do some stuff
};

skuid.$(function(){
    runOnTabActivate();
});

If you really want to set a Tab in JavaScript, you can do it like this:

Give you Tab Set component a Unique Id, e.g. “MyTabSet”, then use this:

skuid.$( “#MyTabSet” ).tabs( “option”, “active”, 1 ); // index is zero-based, so this would activate the 2nd tab

Zach, I have a table under the tab set that shows records related to each tab
That works fine when the user clicks on the tab
but when the page loads it loads the last tab the user has open… and the table is not filtered for just that tab
I could use that last line of code and always force the tab set to open on the first tab.
Is there any way to figure out in javascript what the last tab open was (ie, which one the page is going to open to)

Thanks
Ken

Zach, how can I use this code for a tab set rendered as radio buttons? It doesn’t check the radio button that it moves to.

This code won’t work for a Tab Set rendered as radio buttons — your best bet right now is to find the corresponding radio button and then use jQuery to trigger a click event on it, via something like:

// The zero-based tab index
var tabIndexToSelect = 2;

// This will select the 3rd tab in a Tab Set whose Unique Id is “MyTabSet” that has 3 tabs
skuid.$(‘#MyTabSet > .nx-tabset-header input[type=“radio”]’).eq(tabIndexToSelect).click();

How can I do this based on tab unique id instead of index id?

var TABSET_ID = ‘FruitTabs’;
var TAB_ID = ‘Bananas’;

var $ = skuid.$;
var tabset = $(‘#’+TABSET_ID);
var tabPanels = tabset.children(‘.ui-tabs-panel’);
var targetTabIndex = tabPanels.filter(‘#’+TAB_ID).index() - 1;
tabset.tabs(‘option’,‘active’,targetTabIndex);

SWEEET!

Thanks so much for providing this, that’s great! I made a modification so that executing the snippet will activate the next / previous tab to the one in context. Can I shorten the last line to make it a bit neater? Much appreciated!

Robin

//Activate NEXT tab of the tab in context var params = arguments[0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $ = skuid.$; //Replace "#MyTabSet" with the name you assigned to your tab set. Do not delete the "#".<br> var tabSetId = "#MyTabSet"; var currentTab = $(tabSetId).tabs("option","active"); $(tabSetId).tabs( "option", "active", currentTab + 1 );

Your code will run a little bit faster if you cache the Tab Set selector, and you don’t need the params variable for this Snippet, so you could have just this:

//Activate NEXT tab of the tab in context
var tabset = skuid.$(“#MyTabSet”);
tabset.tabs( “option”, “active”, tabset.tabs(“option”,“active”) + 1 );

Awesome, thank you!!