-
Drop-down population not working in Mozilla
I have a form where I need to populate multiple drop-down based on the first drop-down selection. For the same I am using AJAX. My application is working fine in IE but not in Mozilla.
I tried to debug it and found that the XMLHttpRequest is being created properly but the issue is in populating the dropdown.
I am using the following javascript
-----------------------------------------------------------------------
var XmlHttpObj;
function CreateXmlHttpObj()
{
try
{
XmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(oc)
{
XmlHttpObj = null;
}
}
if(!XmlHttpObj && typeof XMLHttpRequest != "undefined")
{
XmlHttpObj = new XMLHttpRequest();
}
}
function ExamListOnChange()
{
var companyList = document.getElementById("Company_id");
// get selected company from dropdown list
var selectedCompany = companyList.options[companyList.selectedIndex].value;
var requestUrl;
requestUrl = "/PopulateExamList" + "?company_id=" + encodeURIComponent(selectedCompany);
CreateXmlHttpObj();
// verify XmlHttpObj variable was successfully initialized
if(XmlHttpObj)
{
// assign the StateChangeHandler function ( defined below in this file)
// to be called when the state of the XmlHttpObj changes
// receiving data back from the server is one such change
XmlHttpObj.onreadystatechange = StateChangeHandler;
// define the iteraction with the server -- true for as asynchronous.
XmlHttpObj.open("GET", requestUrl, true);
// send request to server, null arg when using "GET"
XmlHttpObj.send(null);
}
}
function StateChangeHandler()
{
// state ==4 indicates receiving response data from server is completed
if(XmlHttpObj.readyState == 4)
{
// To make sure valid response is received from the server, 200 means response received is OK
if(XmlHttpObj.status == 200)
{
PopulateExamList(XmlHttpObj.responseXML.documentElement);
}
else
{
alert("problem retrieving data from the server, status code: " + XmlHttpObj.status);
}
}
}
function PopulateExamList(companyNode)
{
var examList = document.getElementById("Exam");
// clear the exam list
for (var count = examList.options.length-1; count >-1; count--)
{
examList.options[count] = null;
}
var versionList = document.getElementById("Version");
// clear the version list
for (var count = versionList.options.length-1; count >-1; count--)
{
versionList.options[count] = null;
}
var classList = document.getElementById("Class_id");
// clear the class list
for (var count = classList.options.length-1; count >-1; count--)
{
classList.options[count] = null;
}
var examNodes = companyNode.getElementsByTagName('exam');
var idValue;
var textValue;
var optionItem;
for (var count = 0; count < examNodes.length; count++)
{
textValue = GetInnerText(examNodes[count]);
idValue = examNodes[count].getAttribute("id");
optionItem = new Option( textValue, idValue, false, false);
examList.options[count] = optionItem;
}
var versionNodes = companyNode.getElementsByTagName('version');
var idValue;
var textValue;
var optionItem;
for (var count = 0; count < versionNodes.length; count++)
{
textValue = GetInnerText(versionNodes[count]);
idValue = versionNodes[count].getAttribute("id");
optionItem = new Option( textValue, idValue, false, false);
versionList.options[count] = optionItem;
}
var classNodes = companyNode.getElementsByTagName('class');
var idValue;
var textValue;
var optionItem;
for (var count = 0; count < classNodes.length; count++)
{
textValue = GetInnerText(classNodes[count]);
idValue = classNodes[count].getAttribute("id");
optionItem = new Option( textValue, idValue, false, false);
classList.options[count] = optionItem;
}
}
--------------------------------------------------------------------------
Depending on the company id the Exam,Version and Class list is populated.
The XmlHttpObj.responseXML is :
<?xml version="1.0" encoding="UTF-8" ?>
<company id='Boeing'>
<exam id='1'>Exam 1</exam>
<exam id='2'>Exam 2</exam>
<version id='A'>Version A</version>
<version id='B'>Version B</version>
<class id='001'>001</class>
<class id='009'>009</class>
<class id='025'>025</class>
</company>
Please help, its urgent.
Thanxs in advance.
-
-
-
-
Thanks
Thanks John,
My code is working fine now. Actually there was no problem in Javascript. The problem was with JSP page,
I had not used "id" attribute over here
<select name="User_id">
It worked only by making the following modification
<select name="User_id" id="User_id" >
Anyway I found this error when I was trying to implement your code.
So thanks a lot.
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks