Ajax browser and drop down menu problem
Hello,
I have a form that has 2 drop down menus. when you select an item from the first drop down it populates the the second drop down depending on what you selected. It works at first... but if you try to select an option that you had is higher on the list it will not populate... for example... say my 2 options are electronics and medical.. if I select medical the second drop down menu populates... if I decide to change to electronics the second drop down does not repopulate to the choices for electronics. does any one know what I can do to fix that?
my second problem is that my Ajax will not work in Firefox.
here is my code:
<script language="javascript" type="text/javascript">
var XMLHttpRequestObject = false;
try{
XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
} catch(exception1) {
try{
XMLHttpRequestObject = new ActiveXObject("Microsoft");
} catch(exception2) {
XMLHttpRequestObject = false;
}
}
if(XMLHttpRequestObject && window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
function getValue(cat,id) {
getSub(cat,id);
}
function getSub(cat,id) {
if(XMLHttpRequestObject) {
if(cat == "Electronics") {
XMLHttpRequestObject.open("GET","electronics.xml",true);
}
if(cat == "Medical") {
XMLHttpRequestObject.open("GET","medical.xml",true);
}
alert(cat);
var subId = id;
XMLHttpRequestObject.onreadystatechange = function() {
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
var xmlDocument = XMLHttpRequestObject.responseXML;
var subCategory = xmlDocument.getElementsByTagName("subs");
listSubs(subCategory,subId);
}
}
XMLHttpRequestObject.send(null);
}
}
function listSubs(subCategory,subId) {
var loopIndex;
/*if(subId == "mainCat1") {
var subCat = "subCat1";
}*/
var selectControl = document.getElementById("subCat1");
for(loopIndex=0;loopIndex<subCategory.length;loopIndex++) {
selectControl.options[loopIndex] = new
Option(subCategory[loopIndex].firstChild.data);
}
}
</script>
I hope I explained things well enough, thanks for your help.
[2406 byte] By [
blckspder] at [2007-11-11 9:53:52]
# 1 Re: Ajax browser and drop down menu problem
I figured it out... I ended up writing a function that would clear the list every time a new selection was made..
However I am still having problems getting the Ajax to work in Firefox..
here is my new code
<script language="javascript" type="text/javascript">
var XMLHttpRequestObject = false;
try{
XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");
} catch(exception1) {
try{
XMLHttpRequestObject = new ActiveXObject("Microsoft");
} catch(exception2) {
XMLHttpRequestObject = false;
}
}
if(XMLHttpRequestObject && window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
}
function getValue(cat,id) {
clearList(id);
getSub(cat,id);
}
function getSub(cat,id) {
if(XMLHttpRequestObject) {
if(cat == "Electronics") {
XMLHttpRequestObject.open("GET","electronics.xml",true);
}
if(cat == "Medical") {
XMLHttpRequestObject.open("GET","medical.xml",true);
}
if(cat == "Industrial") {
XMLHttpRequestObject.open("GET","industrial.xml",true);
}
if(cat == "Nanotechnology") {
XMLHttpRequestObject.open("GET","nano.xml",true);
}
alert(cat);
var subId = id;
XMLHttpRequestObject.onreadystatechange = function() {
if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
var xmlDocument = XMLHttpRequestObject.responseXML;
var subCategory = xmlDocument.getElementsByTagName("subs");
listSubs(subCategory,subId);
}
}
XMLHttpRequestObject.send(null);
}
}
function listSubs(subCategory,subId) {
var loopIndex;
var subCat;
if(subId == "mainCat1") {
subCat = "subCat1";
}
if(subId == "mainCat2") {
subCat = "subCat2";
}
var selectControl = document.getElementById(subCat);
for(loopIndex=0;loopIndex<subCategory.length;loopIndex++) {
selectControl.options[loopIndex] = new
Option(subCategory[loopIndex].firstChild.data);
}
}
function clearList(id) {
var clearCat;
if(id == "mainCat1") {
clearCat = "subCat1";
}
if(id == "mainCat2") {
clearCat = "subCat2";
}
var len = document.getElementById(clearCat).options.length
for(i = 0; i < len; i++) {
document.getElementById(clearCat).options[0] = null;
}
}
</script>
Please let me know about the Firefox browser thanks for your help.
