Oracle APEX - Put onclick event on tabs of tabs container

Question

I've got a tabs container with three tabs. They have select lists and checkboxes on them which have sql queries as source. Users can select entries in the lists or edit the checked boxes and save this to the database by clicking a button. This button also re-fills the select lists and checkboxes with the current data from the database after saving it.

My problem is: When a user selects an entry in a select list or edits a check box and navigates to antoher tab without clicking on the "save" button, the data stays there when navigating back to the tab. I want to assure that what is depicted in the lists and check boxes is always the current data like it is in the tables in the database.

Therefore, I tried to put an onclick event on the tabs of the tabscontainer like this one:

I didn't get it to work, becuase these elements do not have an ID and I can not set an ID for them in APEX (at least I guess so). Is there a way to do this in APEX anyway?

This is one of the tab elements:

Answer 1

Just in case anyone else is experiencing the same problem: I solved it by putting an custom dynamic action on the tabs container:

This fires whenever the user switches between the tabs and ehrefore worked for me :-)

For more information check this article: https://medium.com/@pierre.yotti/tabs-region-javascript-api-in-oracle-apex-37e20bc9f68f

Answer 2

You can put a static ID to your tab region (for example #SOME_STATIC_ID) and then select the elements with a jQuery selector:

$("#SOME_STATIC_ID a.t-Tabs-link")

Answer 3

You could also define an on click listener on text of the tab:

$(".t-Tabs-label:contains('Tab 1')").click(function(){alert('Doing something on click of Tab 1 !!!')});

It might not be the cleanest solution but it works.