Jquery array populates HTML select options - problem on Android Browser Rendering.
<newbie alert>
In my first version of this web app all of my .js functions were in-bedded in my HTML. This version played fine with my Android. Then I decided to move .js code to external files and rewrite so that my 3 identical dropdowns were populated by JQuery doc.ready function that iterates through arrays (one for the drop down names and one for associated values.)
This works perfectly on my desktop browsers. However when I run it in my Nexus' browser the dropdowns are not populated.
Is there something about the JQMobile meta structure (viewport, roles, etc) that prevents document.ready from working the same way?
I've included what I think might be the pertinent HTML...let me know if you need to some other part...(didn't want to burden post with all of the code).
- <head>
- <title>Enteral Pump Calculator</title>
- <meta name="viewport" id="viewport" content="width=device-width; initial-scale=1; user_scalable=no">
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
- <script type="text/javascript" src="loadDropDown.js"></script>
- </head>
And here is one of the 3 selects
- <select ID="mySelect1" data-theme="a">
- <option value="">Please Select a Food Type</option>
- </select>
And here is basic framework for the loadDropDown.js array to populate the select boxes.
- $(document).ready(function() {
- var foods = new Array();
- foods[0]="Apple";
- foods[1]=...
-
- var foodVal = new Array();
- foodVal[0]="17";
- foodVal[1]=...
- for (var i=0;i<foods.length;i++) {
- $("#mySelect1").append('<option value='+foodVal[i]+'>'+foods[i]+'</option>');
- }
- // this is abbreviated as the arrays have many items and there are 3 for loops (one for each select box)