6

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'?

Phillip Jones
  • 151
  • 1
  • 9
  • Just to note (for seo purposes also), people might attribute this to jquery or jquery Mobile or other javascript libraries, but if this is still a problem as of today (which it is for us), then it sure would be good to hear a solution. – iJames Oct 11 '11 at 01:06
  • 1
    An interesting solution to this problem is to **deactivate the next and previous buttons**. An attempt at doing this has been provided here: http://stackoverflow.com/questions/7472465/disabling-previous-and-next-buttons-in-mobile-safari – iJames Nov 09 '11 at 20:42
  • The plugin from [this post](http://stackoverflow.com/questions/5960731/strange-behavior-of-select-dropdowns-onchange-js-event-when-using-next-on-m/7284325#7284325) worked for me. It appears to be loading the second list as soon as you select the item in the first list instead of waiting until the user hits 'next' or 'done' – Billy Nov 16 '11 at 16:51

3 Answers3

2

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

Parham
  • 1,037
  • 11
  • 17
0

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.

vernonk
  • 1,221
  • 1
  • 8
  • 14
  • From what I can tell, it's no dice. I've tried blur, and even doing a focus on the second dropdown. In both cases on iOS 5 the overlay seems to capture the dropdown options before the change/blur/focus event, thus not enabling the pulldowns to update and thus not allowing the iOS tumblers to update. Still hoping for a solution. Vernon, do you have any other thoughts on this iOS native overlay? Thanks! – iJames Oct 28 '11 at 01:14
  • I'm wondering if there's possibly something else going on. Here's a jsFiddle I set up and tested on my iPhone. http://jsfiddle.net/Wjbxt/1/ The change event is firing when I click next after making a selection in the first dropdown and updates the value in the preview. I'm on iOS 5, test it out and let me know what you get. – vernonk Oct 28 '11 at 13:35
  • This update (http://jsfiddle.net/Wjbxt/2/) prepends the selected value to the second dropdown. That doesn't happen immediately. If I go previous and then back to the second dropdown the value is there. It just doesn't get picked up immediately. Definitely requires more research. – vernonk Oct 28 '11 at 13:40
0

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.

iJames
  • 640
  • 1
  • 7
  • 16