Oracle Database Discussions

This should help https://explorer.uk.com/dynamic-selection-tabs-region-display-selectors-apex/http://webcache.googleusercontent.com/search?q=cache:ZvDzMS0N_okJ:www.explorer.uk.com/dynamic-selection-tabs-region-display-selectors-apex/+&cd=1&hl=en&ct=clnk&gl=uk

user2003324 schrieb:
Apex Version: 5.1.3
Issue: 
When entering Page 2 from Page 1, I want the active tab to always be Tab A. When returning FROM Page 3 or Page 4 to Page 2, I want the active tab to be remembered from the calling sub-region. 
I haven’t been able to figure out any way to make this work.
Thanks for your help.

you can use Jquerry to dynamically select a Tab like bellow:

$("#tabID_tab a").trigger("click");

now the question is how are you navigating from page to page? using Branching or redirect To? or somethinhg else?

according to what you are using you should have an hidden Item on the affected page where you will set a value to identify from which page you are coming from or returning from.

then have a DA on page load of type JS.

var val =apex.item('P2_PAGENUMBER').getValue();
if(val ===2){
$("#tabAID_tab a").trigger("click");
}

you could upload your app online and we could have a look into it.

regards,

Franck

Hi,

This question (how to activate a tab) comes up often. It is reasonable to expect to be able to do these things with an API and/or a built in DA action.

It is fine to trigger a click event but it is always a last resort. It is an indication that something is wrong. Either a flaw in the design or missing functionality of the thing you are trying to control or a lack of knowledge about that thing. In this case it is the APEX aTabs widget which is undocumented.

First give the tabs or RDS region a static id and give each of the tab regions a static id as well.

For RDS then you can activate a tab with code such as:

$("#staticIdOfTabsOrRDSRegion .a-Tabs").aTabs("getTabs")["#staticIdOfTabYouWantToActivate"].makeActive();

Tabs Container region template uses a different prefix for the tab regions:

$("#staticIdOfTabsOrRDSRegion .a-Tabs").aTabs("getTabs")["#SR_staticIdOfTabYouWantToActivate"].makeActive();

Regards,
-John

Thanks all for your suggestions.

John,

  I gave my tab region the static id of 100.

  I gave the first tab the static id of 120.

  I gave the second tab the static id of 140.

For the sake of testing, let's say I want the second tab to be the active tab when page load.  On the page I added the JS (under execute when page loads)  the following:  

$("#100.a-Tabs").aTabs("getTabs")["#SR_140"].makeActive();

What am I missing?

Thanks for your help.

Vicky

Hi Vicky,

Static IDs are usually names not numbers. That probably isn't the problem. It is a good idea to stick with valid values for DOM id attributes.

I think the error is that there should be a space between the #100 and .a-Tabs. You are looking for the .a-Tabs element below the #100 element.

Regards,

-John

Tab Regions static ID:  dxTabReg

Tab 1 static ID:  Agent

Tab 2 static ID:  Response

js:  $("#dxTabReg .a-Tabs").aTabs("getTabs")["#SR_Response"].makeActive();

Page Mode:  Modal Dialog (if this makes a difference)

hI,

Did you manage to get this resolved?  Iam trying to dynamically change active Tab based based on the selected value from Select List

Value = 1 > Tab#1 is active,

Value = 2 > Tab#2 is active

thanks.

hi John,

i need your help on this piece ...

Issue description:

-   I am trying to dynamically change active Tab based based on the selected value from Select List

Value = 1 > Tab#1 is active,

Value = 2 > Tab#2 is active

My code in dynamioc action is like:

- $('ul[id$="_RDS"] > li:nth-child(2) a').aTabs("getTabs")["#CLOSE_TAB_tab"].makeActive();

but iam getting this error below:

Uncaught Error: cannot call methods on aTabs prior to initialization; attempted to call method 'getTabs'

    at Function.error (jquery-2.2.3.min.js?v=5.1.1.00.08:2)

    at HTMLAnchorElement.<anonymous> (desktop.min.js?v=5.1.1.00.08:25)

    at Function.each (jquery-2.2.3.min.js?v=5.1.1.00.08:2)

    at a.fn.init.each (jquery-2.2.3.min.js?v=5.1.1.00.08:2)

    at a.fn.init.e.fn.(:8080/apex/apextdstst/anonymous function) [as aTabs] (http://clapxd01.nycha.nyc.gov:8080/i/libraries/apex/minified/desktop.min.js?v=5.1.1.00.08:25:5901)

    at Object.javascriptFunction (f?p=700:3:9459197085554::::::612)

    at Object.da.doAction (desktop.min.js?v=5.1.1.00.08:18)

    at Object.da.doActions (desktop.min.js?v=5.1.1.00.08:18)

    at HTMLDocument.<anonymous> (desktop.min.js?v=5.1.1.00.08:18)

    at Function.each (jquery-2.2.3.min.js?v=5.1.1.00.08:2)

what could be the issue here?

thanks.

Thanks John, it helped a lot.
One minor addition: in my case putting this DA on Page Load was not enough.
I mean, your JS was doing its job and set active tab but afterwards 1st tab selected back as default. (no, remember last active tab is set to off)
I tested it with some other event points such as on Click, Scroll etc. and it works.
this is an acceptable solution for my case :)

thank you very much.

Sometimes it can be tricky to get the timing right on page load. Many things are being initialized and your code needs to run at just the right moment.
In some cases wrapping your code in setTimeout or $() ready function can help. Examples:

setTimeout( function() {
   your code here
}, 0);

or
$(function() {
   your code here
});

Look at the page source and set breakpoints and/or add console.log to understand the timing, put the page in debug mode if needed.