set tab in javascript

  • 1
  • Problem
  • Updated 4 years ago
  • Solved
what i need is a way to say, when the page loads, fire the event for the first tab that would be fired if the user clicked on it

i have the code for responding when a tab is clicked on... but when the page first loads it does not run
Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
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
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
How can I do this based on tab unique id instead of index id?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
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);
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
SWEEET!
Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb
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
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
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();
Photo of Robin

Robin

  • 894 Points 500 badge 2x thumb
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],            	$ = skuid.$;

//Replace "#MyTabSet" with the name you assigned to your tab set. Do not delete the "#".
var tabSetId = "#MyTabSet"; var currentTab = $(tabSetId).tabs("option","active"); $(tabSetId).tabs( "option", "active", currentTab + 1 );
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
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 );
Photo of Robin

Robin

  • 894 Points 500 badge 2x thumb
Awesome, thank you!!