nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

jQuery Mobile with API version 3.8 and IE and Firefox

BradBarnell

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?

Vind meer berichten getagd met

Accepted answers

khutchins

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>

All comments

JeffPace1

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

BradBarnell

Thanks for for the fix Kelly. You are awesome.

JDHecht1_0-1646841479302.png

khutchins

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?

khutchins

<!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>

JeffPace1

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

MapperJim_0-1646841217414.jpeg

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.