PDA

View Full Version : Drop-down population not working in Mozilla



friends
12-29-2006, 05:18 AM
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.

jscheuer1
12-29-2006, 05:56 AM
You should have a look at this thread:

http://www.dynamicdrive.com/forums/showthread.php?t=15849

friends
12-29-2006, 06:33 AM
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.