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();
Related
I'm trying to make a simple multiple select using Material-UI's Select component. But one thing that I did not like is that if you unselect anything or just don't select anything and click outside, the dropdown disappears but the label remains focused until you click again or focus on other component.
Any solution?
I want to remove focus from the label/select component when the menu disappears.
Link to component: https://material-ui.com/demos/selects/
Although this is not exactly what You are looking for there is important reason why those fields are kept focused (despite of being too much visibly outlined) and it is a11y.
Thanks to keeping focus on <select> element we are allowed to reselect once selected value eg. by only keyboard (this covers case when you selected bad option unintentionally and want to easily come to the select list back or - like in Yours - easily select again if under any situation we wanted it but we closed the list before it happend).
One important thing is that the MD's <select>'s focus behaviour does not differ from the way native select does it:
And generally should not be changed outlinenone.com without having critical reason.
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
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.
I have got a form with 2 dropdown lists on a simple HTML page. Depending on the value selected in the first dropdown list, a Javascript event handler(using the onChange event) changes the options of the second dropdown list.
When selecting a value in the first box and touching the second box in the browser window everything works fine, but when I use the "next" button provided by the dropdown-list-thing of Mobile Safari, only the rendered list changes, but the dropdown-list-thing shows still the old values. How can I fix this?
thanks in advance
Edit:
I've since discovered this is indeed a bug in Mobile Safari. The HTML is updated but the picker view that is loaded up does not update it's values from when it first opens.
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.