Develop Reference

Oracle APEX - Put onclick event on tabs of tabs container

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:

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

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.

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

Refresh previous page dropdown selection

I'm quite new to C# and asp.net and have been struggling for a few days to sort out what seems to be something simple. I've got two pages lets call it page1.aspx and page2.aspx
page1.aspx
I've got two dropdownlists with a continue button. Once the continue button is clicked it will populate data specified in my sql statement. On the first column I've got a hyperlink 'view' and in the last column I've got checkboxes which are disabled. Once I click on the view hyperlink it takes me to page2.aspx which has a button Tick and Untick which ticks the checkbox on page1.aspx
page2.aspx
On this page I've got three buttons (back, tick, untick) the tick and untick buttons is just to tick or untick the disabled checkboxes on page1.aspx. On the back button I'm trying a response.redirect('page1.aspx'); however when I get redirected the dropdownlist is empty and it doesnt repopulate the previous selected criteria to show the newly ticked or unticked checkbox.
What I've tried
I tried a function
function fnHistory() {
window.history.go(-1);
}
on the back button of page2.aspx this does keep my dropdownlist values on page1.aspx however it doesnt display the newly ticked checkbox since the page needs to be refreshed and refreshing the page takes away the dropdown values.
I tried to do a page refresh every 5 seconds on the div where the sql data gets displayed this is however not a option as its just bad practice.
I've tried update panel on page 1 for the div where the sql data gets displayed however the trigger which should be the tick and untick button is on page2.aspx
Your help and advice will be highly appreciated.

Is there anything unique on page2 that you have to open it in another window?
What about opening the 2nd page in a modal? So you can get access to page1 directly.

Trigger dynamic dropdown to load

I'm very new to scripting stuff, but here's what I'm trying to do. When visiting a webpage, there are two dropdowns available, but the second is disabled until a selection is made in the first. The content of the second populates automatically as soon as something is selected in the first, and each option in the first leads to a unique set of options in the second. I'm attempting to automate selecting items in both. I can set a value in the first using "document.getElementById('firstDropdown').value = 'myValue'", and I can get the label of myValue to appear in the dropdown window, but I can't get the second dropdown to populate because it doesn't realize that I've made a selection since I'm not physically clicking on something. Is there a way to reload or refresh only secondDropdown (not the entire page) so that it realizes I have made a selection for firstDropdown and thus populate?

You can trigger change event of firstDropdown with below code using the Event Constructor.
document.getElementById('firstDropdown').dispatchEvent(new Event('change'));

How to automatically refresh an interactive grid after clicking on save button or at a fixed interval?

I have an page item and an interactive grid on an apex page . Page item is of select list type and base on the selection the data in the grid changes. I have default Add row button in the grid to add rows . I want to refresh the grid after after click on the SAVE button in the grid. If the grid automatically refresh itself after a fixed interval of let's say 2 or 5 second that is also good for me.
For the current scenario the rows are getting added but are not reflecting on page in the interactive grid after clicking on SAVE but entries can be found in the table in the database. After reloading the page the entries are reflecting in the grid.
NOTE : I am working over a database link for fetching the data.

There is a way to hook upon the built-in save action of the interactive grid.
Steps below will create a custom event, listening to the interactivegridsave event. That event is fired by APEX after the Interactive Grid has completed its own save process. Make sure the event name is spelled correctly.
Create Dynamic Action
When → Custom
Custom Event → interactivegridsave
Selection Type → Region
Region → <your region>
Refresh action (maybe turn off Fire on Initialization)
I think this will help you.

When you add rows to your Interactive Grid and hit save button, it refreshes and you can see the IG updated.
In case you need to refresh the region or the page every 5/10 seconds, please follow these steps:
Define a Static ID for the IG, for example "IG1".
In the page attributes, navigate to Execute when Page Loads and enter:
var model = apex.region("IG1").widget().interactiveGrid("getViews").grid.model;
setInterval(function(){ model.fetchRecords(model._data); }, 10000);
This is going to refresh the IG every 10 seconds. You can set it to 2 or 5 seconds.

I had something similair with filters, If I added a row that shouldnt show up due to the filter I had on it would still be there until I refreshed. Of maybe if I changed something so it should no longer show up, it saved, but still showed up.
What I did was do a page submit after saving.
I have a Dynamic Action on Click Selection type jQuery Selector and the selector being [data-action="save"]
Then the action is simply Submit page.
This way after you click save, it submits the whole page and reloads.
Hope this does what you need.

Javascript based Tabs - on page reload data is lost

I am using a Tab based layout, which has 5 Steps with different input fields for each step.
and if user on step 4 page reloads then start the complete process from step1 agaig. Is there any possibility to remain on step 4 after reploading the page

Use localStorage to store your information collected so far. If a reload happens, first check, whether any data has already been entered and if so fill in the appropriate elements and redirect the user to the first "unfinished" tab.
localStorage Docu # MDN