4

I am using the jquery selectmenu function within my webpage and it does not seem to work properly on ios browsers.

After I select my menu item the menu disappears but my change: function does not fire at all. It simply just hides the menu again.

My code is the following:

$('#adultMenu').selectmenu({
    change: function() {
        adultval = $(this).val() + ' Adults. ';
        var inputvalue = adultval + childval + youthval + infantval;  
        $('#personInput').val(inputvalue);
    }
});

I think this is quite a common issue on iOS but I am yet to find the answer after a long time reading the forums.

Any help would be great!

jezrael
  • 822,522
  • 95
  • 1,334
  • 1,252
djnetherton
  • 757
  • 1
  • 7
  • 19
  • 1
    "it does not seem to work properly" - what does this mean? You need to be exact otherwise how can we help you? – Andy Nov 04 '14 at 13:29
  • Hi Andy, I have updated my post to be a bit more detailed. Basically when I click my option it just hides the menu again rather than run the code within the change function. I hope this makes sense. Its also worth noting I am only experiencing this issue on IOS and not android. – djnetherton Nov 04 '14 at 13:37
  • Have you tried putting an alert in the change function, so you know whether it's being called or not? The code inside looks fine but it's better to rule it out. Also, have you tried different browsers and remote debugging over USB? – Reinstate Monica Cellio Nov 04 '14 at 13:37
  • Yes I have tried the alert method and nothing is being fired at all. That seems to be the issue. – djnetherton Nov 04 '14 at 13:38
  • How about debugging and trying other browsers? You need to narrow down what's actually wrong. – Reinstate Monica Cellio Nov 04 '14 at 13:42
  • I have tried both safari and chrome on the iphone on multiple versions of the os. I believe it is something to with the native UI of ios stopping the change event completley. – djnetherton Nov 04 '14 at 13:47
  • I don't see [a `change` option in the documentation](http://api.jquerymobile.com/selectmenu/). Are you using [the non-mobile version](http://api.jqueryui.com/selectmenu/#event-change)? – blgt Nov 04 '14 at 14:19

2 Answers2

1

DEAR PEOPLE FROM THE FUTURE: Here's what I've figured out so far:
Edited with new conclusions:

After much more experimentation, I've found the cause. It happens when you set the value of a select menu with something not in the menu. The following demonstrates the issue:

var $fubar = $('.fubar');

$fubar.selectmenu({
    'change': function () {
        $fubar.val('Pancakes');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<select class="fubar">
    <option>Cake</option>
    <option>Ice Cream</option>
</select>
AaronAsAChimp
  • 530
  • 7
  • 18
0

If you are using FastClick library, it could be the problem. I had to disable FastClick for selects as per this comment: https://github.com/ftlabs/fastclick/issues/268#issuecomment-65022184 . For selectmenu I added one more condition in if:

if (targetElement.nodeName.toLowerCase() == 'select' || targetElement.hasClass('ui-menu-item')) {
    return false;
  }
mihai1990
  • 632
  • 5
  • 20