How can I prevent JQuery UI from controlling my selectmenu

Question

I really like bits and pieces of both jquery ui and jquery mobile... mobile makes it easy to render my page for mobile devices, ui gives me a really powerful spinner widget for number boxes that gives me a spinchange event that is too useful to ignore...

But, when I have a selectmenu on a page with both, it short-circuits that select menu and prevents it from opening entirely.

following some pages I found here on stackoverflow, I saw that some people experience problems getting a select to work with jquery mobile, and that wrapping it in a form and setting the data-native-menu option to "false"...

      <form action="#" method="get">
        <div data-role="fieldcontain">
          <label for="option1" class="select">Pick one:</label>
          <select id="option1" name="option1" class="optionPicker" data-mini="true" data-native-menu="false" >
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>
      </form>

but that doesn't fix the problem. Cutting either jquery mobile or ui from the document does... but, again, I lose desired functionality elsewhere.

I found that I can turn off jquery mobile for just that item specifically by doing the following after I load jquery but before I load jquery mobile:

$(document).bind("mobileinit", function () {
  $.mobile.selectmenu.initSelector = ".neverGonnaLetYouClick";
});

I would assume something similar exists for JQuery UI? But... I am not finding it anywhere...

Might consider making a custom widget that is the jQM version. UI has `$.ui` object so you could look into that. — Twisty, Jul 04 '19 at 04:11
building a JQM-like number spinner is very easy by using a `controlgroup`. Here is an example: http://dev.jtsage.com/jQM-Spinbox/ — deblocker, Jul 04 '19 at 10:26

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

Did some testing and I suspect it is due to your load order.

Example: https://jsfiddle.net/Twisty/40n27pca/16/

If you read here: https://api.jquerymobile.com/global-config/ they talk about the following:

Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:

<script src="jquery.js"></script>

<script src="custom-scripting.js"></script>

<script src="jquery-mobile.js"></script>

So I would advise the following:

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>

If you reverse it, jQuery UI gets control of selectmenu.

Hope that helps.

How can I prevent JQuery UI from controlling my selectmenu

1 Answers1