This is a hard one to articulate and I am new to mobile web development so please bear with me:
On my webpage, I have 3 Nested dropdown lists (Area, Town, Street).
Nested as in, each dropdown's items are modified when the selection in the dropdown above it changes. e.g selecting an Area changes the Town and Street lists and selecting a Town changes the Street list.
I use XMLHTTPRequests in the onchange() javascript event of the dropdowns to fetch and populate the other downdowns. This works fine on Android and Desktop browsers.
On Mobile Safari, when a drowdown is touched, a list is shown where the user can select items. In addition the selection box has the Previous/Next/Autofill/Done buttons to navigate to other form elements.
So the user touches the first dropdown, selects a value and presses the Next button. This causes two problems:
First, On this action the first dropdown's oncange() event is not triggered reliably! Sometimes it fires sometimes not.
If after selecting an Area, the user touches somewhere else on the webpage or presses the Done button then the onchange() is fired normally and the Towns and Streets are populated normally.
Second, the element that comes into focus when pressing then Next button is the dropdown whos elements need to be changed after being fetched. When the onchange() of the previous dropdown does get fired then, either the list is no updated or the items in the select box turn blue and all of them have a tick mark showing that they are all selected..
From what i can tell the problem would be solved if i can disable the Next/Previous buttons in the selection box or somehow fix how the onchange() is fired and the next in focus dropdown's list items are repopulated while it is in focus.
Here is the code (simplified):
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no />
<title></title>
</head>
<body onload=AppStart();>
<form action=#>
Area:
<select id=ddlArea>
<option value=>-- Select Area -- </option>
<option value=1>Area 1</option>
<option value=2>Area 2</option>
<option value=3>Area 3</option>
<option value=4>Area 4</option>
<option value=5>Area 5</option>
</select>
<br />
Town:
<select id=ddlTown>
<option value=>Please wait ...</option>
</select>
<br />
Street:
<select id=ddlStreet>
<option value=>-- Select Area or Town -- </option>
</select>
<br />
Unit:
<select id=ddlUnit>
<option value=>-- No Street Selected -- </option>
</select>
<script type=text/javascript>
var ddlArea, ddlTown, ddlStreet, ddlUnit;
function AppStart() {
ddlArea = document.getElementById(ddlArea);
ddlTown = document.getElementById(ddlTown);
ddlStreet = document.getElementById(ddlStreet);
ddlUnit = document.getElementById(ddlUnit);
ddlArea.onchange = areaChanged;
ddlTown.onchange = townChanged;
ddlStreet.onchange = streetChanged;
setTimeout(function() { updateTown(); }, 250);
}
var areaId = , townId = , streetId = , unitId = ;
function areaChanged(e) {
areaId = ddlArea.options[ddlArea.selectedIndex].value
ddlClear(ddlTown, createOption(Please Wait..., ));
ddlClear(ddlStreet, createOption(Please Wait..., ));
ddlClear(ddlUnit, createOption(-- No Street Selected --, ));
setTimeout(function() { updateTown(areaId); }, 500);
setTimeout(function() { updateStreet(areaId, ); }, 700);
}
function townChanged(e) {
townId = ddlTown.options[ddlTown.selectedIndex].value
ddlClear(ddlStreet, createOption(Please Wait..., ));
ddlClear(ddlUnit, createOption(-- No Street Selected --, ));
setTimeout(function() { updateStreet(areaId, townId); }, 400);
}
function streetChanged(e) {
streetId = ddlStreet.options[ddlStreet.selectedIndex].value
ddlClear(ddlUnit, createOption(Please Wait..., ));
setTimeout(function() { updateUnit(streetId); }, 600);
}
function updateTown(areaID) {
ddlClear(ddlTown, createOption(-- Select Town --, ));
var items = isNaN(parseInt(areaID)) ? 10 : parseInt(areaID);
if (areaID == ) areaID = ALL;
for (var i = 0; i < items; i++) {
ddlTown.appendChild(createOption(Town + (i+1) + , Area + areaID, i));
}
}
function updateStreet(areaID, townID) {
ddlClear(ddlStreet, createOption(-- Select Street --, ));
var items1 = isNaN(parseInt(areaID)) ? 10 : parseInt(areaID);
var items2 = isNaN(parseInt(townID)) ? 10 : parseInt(townID);
var items = items1 + items2;
if (areaID == ) areaID = ALL;
if (townID = ) townId = ALL;
for (var i = 0; i < items; i++) {
ddlStreet.appendChild(createOption(Street + (i + 1) + , Area + areaID + , Town + townID, i));
}
}
function updateUnit(streetID) {
ddlClear(ddlUnit, createOption(-- Select Unit --, ));
var items = isNaN(parseInt(streetID)) ? 10 : parseInt(streetID);
if (streetID == ) streetID = ALL;
for (var i = 0; i < items; i++) {
ddlUnit.appendChild(createOption(Unit + (i + 1) + , Street + streetID, i));
}
}
function ddlClear(Dropdown, option) {
while (Dropdown.options.length > 0) {
try { Dropdown.options[0] = null; } catch (e) { };
}
if (option != null) {
Dropdown.appendChild(option);
}
}
function createOption(text, value) {
var oOption = document.createElement(OPTION);
oOption.innerHTML = text;
oOption.value = value;
return oOption;
}
</script>
</form>
</body>
</html>
Help. :/
