My cascading dropdowns work well on desktop browsers and the iPad, but I really only need it to work on the iPhone on iOS 7 and Android. The problem is with the iPhone. After I choose an option on the first dropdown if I navigate to the next dropdown using the > button, it switches before the ajax call completes, so my dropdown is either empty or still holding the previous choices. If I hit Done, the blur event is sufficient to make it work.
Here is the simplest fully functional example:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Cascading dropdowns" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<title>Cascade</title>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header" class="jqm-header">
<h1>Cascade</h1>
</div>
<div data-role="content" >
<div data-role="fieldcontain">
<select name="agency" id="agency" >
<option value="actransit">AC Transit</option>
<option value="emery">Emeryville</option>
<option value="sf-muni">MUNI</option>
</select>
<select name="selectRoute" id="selectRoute"></select>
</div>
</div>
</div>
<script>
var nextBus = "http://webservices.nextbus.com/service/publicXMLFeed?";
function updateRoutes(agency) {
$.ajax({
type: "GET",
url: nextBus + "command=routeList&a=" + agency,
dataType: "xml",
success: function(xml) {
$("#selectRoute").children().remove();
$(xml).find('route').each(function(){
var tag = $(this).attr('tag');
var title = $(this).attr('title');
$('<option value="' + tag + '">' + title+ '</option>').appendTo("#selectRoute");
});
$("#selectRoute").selectmenu('refresh');
}
});
}
$().ready(function(){
$("#agency").blur (function (event)
{
var agency = $("#agency").val();
updateRoutes(agency);
});
});
</script>
</body>
</html>
On some browsers, the > button could be simulated by pressing the tab key. I've tried adding this to delay the focus change until after the ajax completes:
$("#selectAgency").keypress (function(e) {
if (e.keyCode == 9) {
tabHappened = true;
updateRoutes($("#selectAgency").val());
e.preventDefault();
}
}
});
Then after populating the next dropdown, calling:
if (tabHappened) {
tabHappened = false;
$("#selectRoute").focus();
}
But neither keypress, keydown, nor a few others I tried seem to trigger, or there is something else going on. I don't have a way to monitor which events are happening on the iPhone's safari browser. I appreciate any insight in getting the quick navigation buttons on the iPhone to work with this. Thanks in advance for taking the time to look this over.
Using async=false for your ajax will prevent all subsequent events from firing until it is complete. see What does "async: false" do in jQuery.ajax()?