topic Re: jQuery Mobile with API version 3.8 and IE and Firefox in ArcGIS JavaScript Maps SDK Questions

jQuery Mobile with API version 3.8 and IE and Firefox

BradBarnell — Thu, 27 Mar 2014 17:30:24 GMT

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?

Re: jQuery Mobile with API version 3.8 and IE and Firefox

JeffPace — Thu, 27 Mar 2014 20:12:53 GMT

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

Re: jQuery Mobile with API version 3.8 and IE and Firefox

KellyHutchins — Thu, 27 Mar 2014 20:35:14 GMT

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>

Re: jQuery Mobile with API version 3.8 and IE and Firefox

KellyHutchins — Thu, 27 Mar 2014 20:39:45 GMT

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?

Re: jQuery Mobile with API version 3.8 and IE and Firefox

BradBarnell — Thu, 27 Mar 2014 23:18:55 GMT

Thanks for for the fix Kelly. You are awesome.

Re: jQuery Mobile with API version 3.8 and IE and Firefox

JeffPace — Fri, 28 Mar 2014 12:26:26 GMT

Great to see this is fixed in 3.9 as well. Good job JS team 🙂