Select to view content in your preferred language

jQuery Mobile with API version 3.8 and IE and Firefox

1014
5
Jump to solution
03-27-2014 10:30 AM
BradBarnell
Regular Contributor
Version 3.8 of the API works great to fix the IE11 map zoom issues, but 3.8 causes jQuery Mobile select menu dropdowns to freeze in IE9 now.  Why are there no jQuery Mobile samples with dropdown menus to demonstrate this issue from the ESRI samples page.

Also, with 3.8 and the latest version of Firefox, dynamically created jQuery Mobile dropdown menus do not display when clicking on them until you move the mouse cursor at least 1 pixel. 

Does anyone know if ESRI has stopped support for jQuery Mobile in favor of DOJO or if there are any workarounds for these problems?
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor
The issue with the menu items not appearing in Firefox until you move the cursor will be fixed in version 3.9 of the JSAPI. This is an issue because in the esri.css file we have a rule for select that sets the color to inherit. Since we haven't qualified the rule it applies to all selects. At the next release we'll qualify this and the conflict will no longer occur.

You can fix this in 3.8 by overriding the color for example:

<!DOCTYPE html> <html>    <head>       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">       <title>Test</title>        <link href="http://js.arcgis.com/3.8/js/esri/css/esri.css" rel="stylesheet" type="text/css" />        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />       <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>       <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>       <style>       .mySelect{         color: #333;       }       </style>    </head>     <body>       <div data-role="page">          <label for="my_combo">Combo</label>          <select id="my_combo" name="my_combo" class="mySelect" data-inline="true"></select>       </div>         <script>           function loadSelectMenu(elem, sa) {              var i;              var e = $("#" + elem);              for (i = 0; i < sa.length; i++) {                 e.append('<option value="' + sa + '">' + sa +'</option>');              }           }            loadSelectMenu("my_combo", ["Blue", "Red", "Green", "Yellow", "Magenta"]);        </script>     </body> </html> 

View solution in original post

0 Kudos
5 Replies
JeffPace
MVP Alum
they haven't dropped support, there never was any.

ESRI's api (as far as I know) has always been dojo.  Dojo is great, give it a try.  A few months ago I spent some time getting all the jquery out of my code, and I am much happier now using only dojo and native javascript
0 Kudos
KellyHutchins
Esri Frequent Contributor
The issue with the menu items not appearing in Firefox until you move the cursor will be fixed in version 3.9 of the JSAPI. This is an issue because in the esri.css file we have a rule for select that sets the color to inherit. Since we haven't qualified the rule it applies to all selects. At the next release we'll qualify this and the conflict will no longer occur.

You can fix this in 3.8 by overriding the color for example:

<!DOCTYPE html> <html>    <head>       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">       <title>Test</title>        <link href="http://js.arcgis.com/3.8/js/esri/css/esri.css" rel="stylesheet" type="text/css" />        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />       <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>       <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>       <style>       .mySelect{         color: #333;       }       </style>    </head>     <body>       <div data-role="page">          <label for="my_combo">Combo</label>          <select id="my_combo" name="my_combo" class="mySelect" data-inline="true"></select>       </div>         <script>           function loadSelectMenu(elem, sa) {              var i;              var e = $("#" + elem);              for (i = 0; i < sa.length; i++) {                 e.append('<option value="' + sa + '">' + sa +'</option>');              }           }            loadSelectMenu("my_combo", ["Blue", "Red", "Green", "Yellow", "Magenta"]);        </script>     </body> </html> 
0 Kudos
KellyHutchins
Esri Frequent Contributor
I tested the 'freezing menu' in IE9 issue using the code I posted above and cannot reproduce the issue. Can you provide a code example that shows the problem?
0 Kudos
BradBarnell
Regular Contributor
Thanks for for the fix Kelly.  You are awesome.
0 Kudos
JeffPace
MVP Alum
Great to see this is fixed in 3.9 as well. Good job JS team 🙂
0 Kudos