Hi all,
Having an issue with "selectedIndex" (for a select field).
Basically I'm creating XML code via a server-side PHP file and retrieving this code through AJAX. Once I retrieve the data, I'm placing it in their appropriate fields.
This is the XML output:
<response>
<data>
<row>
<item>ProductEight</item>
</row>
<row>
<item id='selected'>CategoryOne</listItem>
<item id='notSelected'>CategoryTwo</listItem>
</row>
<row>
<item id='selected'>MakeOne</listItem>
<item id='notSelected'>MakeTwo</listItem>
</row>
<row>
<item id='selected'>ModelOne</listItem>
<item id='notSelected'>ModelTwo</listItem>
</row>
<row>
<item id='selected'>NumberOne</listItem>
</row>
<row>
<item>1</item>
</row>
<row>
<item>1.20</item>
</row>
<row>
<item>asdfdgf</item>
</row>
<row>
<item>0000-00-00</item>
</row>
</data>
<fields>
<field>Product_Name</field>
<field>Category</field>
<field>Make</field>
<field>Model</field>
<field>Model_Number</field>
<field>Quantity</field>
<field>Price</field>
<field>SKU</field>
<field>Expiry</field>
</fields>
</response>This is the JavaScript/AJAX code:
response = xmlhttp.responseXML;
var resp = response.getElementsByTagName("response");
var data = resp[0].getElementsByTagName("data");
var fields = resp[0].getElementsByTagName("fields");
var length = parseInt(fields[0].childNodes.length / 2);
var fieldsArray = new Array(length);
for (i = 0; i < length;i++) {
fieldsArray[i] = "mod_"+fields[0].getElementsByTagName("field")[i].childNodes[0].nodeValue;
}
for (i = 0; i < (parseInt(data[0].childNodes.length / 2)); i++) {
var row = data[0].getElementsByTagName("row");
for (j = 0; j < (parseInt(row[i].childNodes.length / 2)); j++) {
id = row[i].getElementsByTagName("item")[j].getAttribute("id");
if (id == null) {
document.getElementById(fieldsArray[i]).value = row[i].getElementsByTagName("item")[j].childNodes[0].nodeValue;
} else {
document.getElementById(fieldsArray[i]).options.length = 1;
for (k = 0; k < (parseInt(row[i].childNodes.length / 2)); k++) {
var newOption = document.createElement("option");
newOption.text = row[i].getElementsByTagName("item")[k].childNodes[0].nodeValue;
newOption.value = row[i].getElementsByTagName("item")[k].childNodes[0].nodeValue;
var Option = document.getElementById(fieldsArray[i]).options[k+1];
document.getElementById(fieldsArray[i]).add(newOption,Option);
}
if (id == "selected") {
document.getElementById(fieldsArray[i]).selectedIndex = (j+1);
}
}
}
}So as you can see, if there's an XML node that has an ID attribute, it is going to be select field option. If the ID is set to "selected" I naturally want to select the proper index.
As far as everything goes, it works great up until this chunk of code:
if (id == "selected") {
document.getElementById(fieldsArray[i]).selectedIndex = (j+1);
}In my case, there are 4 select fields. That piece of code will only work for the 4th select field, the previous three remain on the selectedIndex of 0. From what I can see, this SHOULD be working, but naturally it isn't :(
Any ideas?