Tab Activation doesn't seem to work

Questions
1

I have a tabset “parentTab”, with tabs (a,b,c,d,e). In tab b, I have a button “redirect”, on button action, I’ve added the below JS snippet. I assume that should navigate the tab to tab - “d”. But nothing happens.

$ = skuid.$;
$(“#parentTab”).tabs();
var tabSetId = “#parentTab”;
$(tabSetId).tabs(“option”,“active”,3);

Am I missing something?

2

Hello Anjana-Malhotra,

I would in general recommend using inbuilt Skuid functionality and staying away from JQuery especially in v2 pages.

The above could be done in Skuid via the following:

skuid.$C(<idTabContainer>).cpi.setActiveTab(<TabId>)

or

skuid.$C(<idTabContainer>).cpi.setActiveTabByIndex(<idxTab>)

Best,
Lukas

1 Like
3

Hi @lukaspovilonis , I tried the below code
skuid.$C(‘tabSet’).cpi.setActiveTab(‘second-tab’)

It is giving me the below error
TypeError: Cannot read properties of undefined (reading ‘cpi’)

4

It seems like the component Id you have provided is incorrect. Please double check the Id of your TabSet, also check for trailing/leading spaces and capitalisation.

image
image2686×949 91.1 KB

1 Like
5

The problem is, I’m trying to access the tab-set component from another page.
I’ve the tab-set in page-A, each tab is routed to several other pages. I want to set the active-tab from page-C, whereas we have we have the tab-set in Page-A. Is that possible? How do we access component from other page?

6

Hey @Anjana-Malhotra! An event-triggered action sequence should help you “communicate” between different pages.

I’d suggest creating an event-triggered action sequence on page-A (where your tab set is located), with a custom event name, “change-tab” for example - and be sure to set the scope to “All active pages”. Add the snippet used to change the tab to this action sequence. Then in page-C (where you want to trigger the tab activation) use the “Publish Event” Action and reference your custom event name (“change-tab”).

1 Like