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:

CodePudding user response：

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")

CodePudding user response：

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.