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

How can I set a default value in a drop-down list, but still be able change the selection with JavaScript/JQuery

I have a tampermonkey script I hacked together with some JavaScript, JQuery, and google-fu. It runs on a specific webpage where I enter some data.
The drop-down lists on this webpage are huge, but for the majority of them I only use a specific option (or few options). I am running into a problem when I need to change one of the values of the drop-down to something else, but it reverts back to the default option.
$(document).ready(()=>{
$("#MainContent_Lead").val('64');
$("#MainContent_Meeting").val('1');
$("#MainContent_Duration").val('30');
Line #2: The value set for lead is the only option I would ever select in that drop-down, it works great.
Line #3: For the next drop-down, I use val 1 about 90% of the time, so I want val 1 to be selected by default, but I also need to be able to change the value on occasion. Currently when I change it, it reverts back immediately.
Line #4: Strangely enough, the third drop-down is also something that I need to change frequently, but when I change the value it works as intended.
What do I need to do to set val 1 for #MainContent_Meeting by default, but allow me to change it when needed?

JsGrid: button to get a value

I’m using JsGrid and I can’t find if when I click on a button (inside my JsGrid-each row contains a button) it’s possible: to get a specific value from that row and load it to another page. Something like data editing in another page (maybe just get the ID (for example) and then, in this other page, I do the SELECT again).
If it’s possible (click on a button, get specific value and send it to another page), please let me know which callback to use (and how or an example, just to know how to properly use it).

force safari iOS select component to update when options change

When you tap on a select input on a web page using iOS (iPhone), a spinner widget (the "picker") pops up and lets you spin through and select options within that select. Let's say you've tapped into one of these and the selector widget is open. While this is open, if you use javascript to modify the select options (add, remove, update options via the dom), then these changes don't get reflected in the widget unless the user closes and reopens the widget.
Is there a way to force the browser to update the options automatically?
Edit: Here is an example you can use to observe how updating select options doesn't update the selector widget: http://jsfiddle.net/RrsNk/
<select id="my-select" />
$(function () {
updateSelect();
});
function updateSelect() {
$("#my-select").empty();
for (i = 0; i < 5; i++) {
var ran = Math.random();
$("<option />").attr("value", ran).html(ran).appendTo("#my-select");
}
setTimeout(updateSelect, 2000);
}

Safari uses a UIPickerView to display the dropdown menus. As you would expect, the title of the dropdown component in the page is updated according to the changes in the DOM but the picker view is not tightly coupled with the DOM so it isn't updated. The situation is the same with Chrome and Opera Mini.
So in conclusion, it is not possible what you are trying to implement. You should look for other ways to make your dataset accessible.

I was brought to this question as the closest to my usage case, which is similar but not identical, and might apply to other people as it is a common situation. I found the answers here a touch confusing, so just wanted to clarify my findings.
I start with a dropdown containing just one option: Searching....
When the user clicks, the "picker" pops up (a "tick-list" on iPad, same principle as the "spinner" on iPhone), showing Searching....
An AJAX call gets come choices from the server, and JavaScript updates the options[] to these.
At this point, the picker still shows just Searching..., and the user has no clue that it has been repopulated. The user must click outside to dismiss the "picker", and click the dropdown again to see the new choices.
So in my case I do not have OP's situation of wanting a second dropdown to be displayed depending on what option is selected in the first dropdown. Rather I would like (#1) the "picker" disappear, and then (#2) reappear (with the new choices).
Now, it seems you can do #1, but not #2.
You can dismiss the "picker" by dropdown.blur() (tested in Mobile Safari). See Close a SELECT dropdown list programatically with Javascript/jQuery.
You cannot cause the "picker" to pop up again (at least not in Mobile Safari). See How can you programmatically tell an HTML SELECT to drop down (for example, due to mouseover)?.
So I am at least doing #1, so that the user gets some feedback rather than just being stuck with Searching....
If anyone can state how you can do #2 on Mobile Safari I would be very interested to hear....

Worth trying: populate a second <select> element, and .focus() to it when the item in the first select list is chosen.
Note that iOS only allows a control to be focused within a user interactive events (touchend or click event) so I am guessing Safari Mobile might allow .focus() to work within a <select> (to opening the second select list).
Might not work, since an onchange event of a select list might not be deemed "interactive" or Safari Mobile might otherwise disallow selectElement.focus() to work for some reason.
Edit: I think this shows it is unlikely to work: force safari iOS select component to update when options change
Don't bother trying if you need to contact a server to fill the list. That is because when you get the response event, you are definitely not in a user interactive tap/click event handler, so .focus() is sure to be ignored (although there is a very slight chance an async chain could work).

Firstly, why would you want to - you should adjust the values in your HTML file, or with JavaScript as the page is loading.
However, if the values are changing as the user selects the dropdown, you can use JavaScript to select another element, then reselect the dropdown, causing it to reload.
You can bring focus to an element with the focus() method. Eg.
Document.getElementById("input").focus();

Triggering Javascript on cached page?

I'm pretty sure I can't do what I'm actually asking, but am wondering if there is some sort of workaround for the issue.
I have a page that has a drop down SELECT form element with several options. If one particular option (in this case, the first item) is selected, we show additional content (via jQuery). This works fine.
What happens, though, is that if I select item 2, the additional content disappears, as it should. I then go to a different page and then hit BACK. A that point, the page properly has kept that additional content hidden (as it was the last state) but the SELECT menu has been reset to the first item. I then have to click the SELECT, pick a different option, then select it again picking the first option, which finally brings the additional content back.
I can't trigger Javascript from what I can tell on a cached page (or is there a way?) Any other clever options?
One option I've come up with is to apply some sort of mouseover action to the area that houses the SELECT menu that does a quick 'reset elements' check. This seems a bit hacky and, of course, will produce an odd screen redraw unexpectedly for people.

You can record that the user action has taken place and re-execute it using JavaScript. You can store it in a cookie, then check for it on page load and reset the elements you want.