Develop Reference

Solution to disable default select option open behavior on "NEXT" virtual button of iOS keyboard?

I have developed hybrid application with Cordova (PhoneGap/ HTML / jQuery/ CSS) on iOS platoform and I am facing application crash issue on one scenario.
In the page I have mentioned three select elements in a sequence along with few inputs. When I focus on first input element of form and used "NEXT" button of virtual keyboard to move next element it work fine till it come to first select option. Once first select option get focus by "NEXT" button event it open up its option window. if I do not wait on first select option and press "NEXT" button then my application get crashed. I have tried multiple option to fixed this issue like below:
1) keeping all options disable till user click on its parent div. but event does not work on disable select option. However it work on other area like its associated label.
2) keeping hidden input next to select option with tabindex=1
I searched lot but didn't find any proper solution. Searched to disable NEXT button focus event on select option to remove default behavior of select option on iOS.
Does anyone have idea to fix this issue? Do we have any safari/iOS base attribute to disable default behavior OR any jquery/ javascript solution?
Best Regards,
Jeet

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();

Innerhtml not retaining selected options for Selectbox and Radio in Mozilla and Chrome but works fine in IE

I have an application with several tabs, each of them having couple of fields. The last tab is Preview tab wherein I would like to show all the controls from all tabs in grayed color in uneditable mode. To do that, I am taking innerhtml of all tabs and showing the same in Preview tab.
While this logic works fine for Text fields, Select fields and Radio fields are not retaining their selected options in Mozilla and Chrome. It works as expected in IE 7, 8 and 9 too.
Any clue on this?

Try using the clone() method to make a copy of it instead of using the innerHTML property.
Example in JSFiddle: http://jsfiddle.net/jLB5s/

Any way to view exactly what's going in the HTML via Firebug with dynamic updates to input fields?

I'm using JavaScript to customize radio buttons. I added labels for each of the buttons and when I click the labels, it seems to be updating the selected radio properly, but not when I click the radio button graphic. (only the background position changes)
Is there anyway I can make it so I can view the changes when to each of the radio button input elements in firebug when clicking on them?
If you'd like to see an example of what I'm talking about, go here, inspect one of the radio button elements and click on them and you'll see the code never changes (i.e. checked="checked").

When you change the DOM via Javascript, you're changing the in-memory version. The source of the DOM is never modified by your Javascript.
See: Firefox Live DOM.

If you right click on the element and select "Inspect Element" it will show you the HTML for this element in memory and will reflect changes to that as you interact with the page.
Also if you select the "Script" tab you can find your javascript and set break points to allow you to step through the script and debug any issues that may be occurring.

'next' in the dropdown on iPhone Safari does not trigger on change event

I am trying to do a straight forward cascading dropdown for mobile safari. I have this working 100% in safari itself, which shows normal style drop downs. But mobile safari dropdowns have a 'next' button.
Hitting this next button takes you to the next drop down in the cascade with triggering onchange() - thus the next dropdown is empty.
The user is forced to press 'done' to trigger on change, then click on the next dropdown.
Does anyone know a way around this. Or what DOM event is triggered by mobile safari's''next'?

Disabling the second drop down from the beginning is the only work around I have found so far! it will disable the "next" button on iphones
Add the disabled attr (disabled="disabled") to you select and use javascript or jQuery to enable or disable.
here is the jQuery code
$(".DD1").focus(function() {
$('.DD2').attr('disabled', 'disabled');
}).blur(function() {
$('.DD2').removeAttr('disabled');
});
here is a live example that is doing this
using jQuery:
http://www.imotors.com/mobile

That's an iOS native overlay, so what you'll get is a blur event when that overlay comes up. Try using the blur event and see how that works.

I have tried many direct solutions to solve this problem with no success. The second pulldown is populated after Safari Mobile's "form assistant" overlay comes up with the spinner (called a "picker" in documentation - http://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/UIElementGuidelines/UIElementGuidelines.html), comes up. So the picker is populated with old values.
In another case, if the second cascading pulldown is inactive, the Next button of the form assistant skips right over it. In that scenario, though, once the following form element is landed on, the second pulldown does update itself correctly, so tapping "previous" at that point gives the correct list in the picker.
My "answer" is that Apple is suggesting that JavaScript based cascading pulldowns should not be used but that another UX is to be implemented though I have found nothing that describes this aside from the standard jQuery Mobile type paging menus.