Population Of a Drop Down List Using Ajax

[satyanarayana49]

Hi all,
I am new to ajax and my requirement is to populate DDLs dynamically without refreshing the whole page.
I found some script in which they created an httpRequest object and using this object they got response(an XML File).Then they handled this XML file on the client side to populate the DDLs.
By using this script i can populate the DDLs(with some methods on nodes from XML File and not based on the company selected).
My asp.net web form(default.aspx) has 4 drop down lists and their ids are-companyDDL,examDDL,versionDDL,classDDL.
My aim is to populate the last 3 DDLs with appropriate values based on the selection of a Company from companyDDL.My application contains an XML file(XMLFile.xml).It holds the information about different companies.It looks like this:

<?xml version="1.0" encoding="utf-8"?>
<companies>
<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'>002</class>
<class id='025'>003</class>
</company>
<company id='Microsoft'>
<exam id='1'>Exam 3</exam>
<exam id='2'>Exam 4</exam>
<version id='A'>Version C</version>
<version id='B'>Version D</version>
<class id='001'>004</class>
<class id='009'>005</class>
<class id='025'>006</class>
</company>
<company id='Cisco'>
<exam id='1'>Exam 5</exam>
<exam id='2'>Exam 6</exam>
<version id='A'>Version E</version>
<version id='B'>Version F</version>
<class id='001'>007</class>
<class id='009'>008</class>
<class id='025'>009</class>
</company>
</companies>

please anyone kindly help me.if u think the question is incomplete, please let me know that.

-Satya

[satyanarayana49]

Here is my script:

<script type="text/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 companyListOnChange()
{
var companyList = document.getElementById("companyDDL");
var selectedCompany = companyList.option[companyList.selected
Index].value;

var requestUrl;
requestUrl = "./DataAccess/XMLFile.xml" + "?companyDDL=" +
encodeURIComponent(selectedCompany);

CreateXmlHttpObj();
if(XmlHttpObj)
{
// assign the StateChangeHandler function ( defined below in this file)
XmlHttpObj.onreadystatechange = StateChangeHandler;
XmlHttpObj.open("GET", requestUrl, true);
XmlHttpObj.send(null);
}
}

function StateChangeHandler()
{
if(XmlHttpObj.readyState == 4)
{
if(XmlHttpObj.status == 200)
{
var companyList = document.getElementById("companyDDL");
var response = XmlHttpObj.responseXML.documentElement;

var res1=response.getElementsByTagName('company')[0].childNodes(0).firstChild.data;
var res2=response.getElementsByTagName('company')[1].childNodes(1).firstChild.data;
var res3=response.getElementsByTagName('company')[1].childNodes(2).firstChild.data;
var res4=response.getElementsByTagName('company')[1].childNodes(3).firstChild.data;
var res5=response.getElementsByTagName('company')[1].childNodes(4).firstChild.data;
var res6=response.getElementsByTagName('company')[1].childNodes(5).firstChild.data;
var res7=response.getElementsByTagName('company')[1].childNodes(6).firstChild.data;

var examList1 = document.getElementById("examDDL");
var versionList1 = document.getElementById("versionDDL");
var classList1 = document.getElementById("ClassDDL");

optionItem1 = new Option(res1, res1, false, false);
optionItem2 = new Option(res2, res2, false, false);
optionItem3 = new Option(res3, res3, false, false);
optionItem4 = new Option(res4, res4, false, false);
optionItem5 = new Option(res5, res5, false, false);
optionItem6 = new Option(res6, res6, false, false);
optionItem7 = new Option(res7, res7, false, false);

examList1.options[0] = optionItem1;
examList1.options[1] = optionItem2;
versionList1.options[0] = optionItem3;
versionList1.options[1] = optionItem4;
classList1.options[0] = optionItem5;
classList1.options[1] = optionItem6;
classList1.options[2] = optionItem7;

}
else
{
alert("problem retrieving data from the server, status code: " + XmlHttpObj.status);
}
}

}

This is how i called the function for onchange event of the ompanyDDL

<select id="companyDDL" style="width:342px" onchange="companyListOnChange()" runat="server">

By using the above script i can populate the DDLs(with some standard
nodes from XMLFile.xml and not based on the company selected).

How can I populate the DDLs based on the company selected .In the above script what is the use of passing a QueryString to the server.
Is any server side code required to handle this QueryString and generate appropriate XML.

Thanks for any reply.

[satyanarayana49]

can anyone help on this.....
Thanks

[daveVk]

change res1 to res7 assignments to something like this

var company; 
var companys = response.getElementsByTagName('company'); 
for ( var i=0; company=companys[i++]; ) { 
 if ( company.id == selectedCompany ) { 
  var res1=company.childNodes(0).firstChild.data; 
  ... 
  } 
 } 

[satyanarayana49]

Hi Dave,
Thanks for ur reply.i tried your code,but what i was getting is population of the details of the last company only.And then the drop drowns wouldn't update with the selection change.
i wait for ur reply.
-satya

[daveVk]

Note sure why problem with last try, thinking about it, it can be simplified. Take "alert( selectedCompany );" out if all well.

REPLACE

var res1=response.getElementsByTagName('company')[0].childNodes(0).firstChild.data;
var res2=response.getElementsByTagName('company')[1].childNodes(1).firstChild.data;
var res3=response.getElementsByTagName('company')[1].childNodes(2).firstChild.data;
var res4=response.getElementsByTagName('company')[1].childNodes(3).firstChild.data;
var res5=response.getElementsByTagName('company')[1].childNodes(4).firstChild.data;
var res6=response.getElementsByTagName('company')[1].childNodes(5).firstChild.data;
var res7=response.getElementsByTagName('company')[1].childNodes(6).firstChild.data;

TO

var company = response.getElementById( selectedCompany );
var res1=company.childNodes(0).firstChild.data;
var res2=company.childNodes(1).firstChild.data;
var res3=company.childNodes(2).firstChild.data;
var res4=company.childNodes(3).firstChild.data;
var res5=company.childNodes(4).firstChild.data;
var res6=company.childNodes(5).firstChild.data;
var res7=company.childNodes(6).firstChild.data;
alert( selectedCompany );

[satyanarayana49]

Hi Dave,

This is the code i have used,for which i was getting the DDLs populated only with the last company's details.

var company;
var companys = response.getElementsByTagName('company');

for(var i=0; company=companys[i++];)
{
if(company.id == selectedCompany)
{
var res1=company.childNodes(0).firstChild.data;
var res2=company.childNodes(1).firstChild.data;
var res3=company.childNodes(2).firstChild.data;
var res4=company.childNodes(3).firstChild.data;
var res5=company.childNodes(4).firstChild.data;
var res6=company.childNodes(5).firstChild.data;
var res7=company.childNodes(6).firstChild.data;

Here in for statement we didn't use any condition like:
for(var i=0; i<=3; company=companys[i++];)
If i try to use i<=3 or i<=companys.length i am getting an error.

What would be the most likely problem u think of?

[daveVk]

This code looks good to me, to narrow down the problem please add the two debug lines show below in bold. alert 1 shuld show for eah company and alert 2 for selected company only.

var company;
var companys = response.getElementsByTagName('company');

for(var i=0; company=companys[i++];)
alert( "ALERT 1 " + company.id + " selected " + selectedCompany );
{
if(company.id == selectedCompany)
{
alert( "ALERT 2 MATCH" );
var res1=company.childNodes(0).firstChild.data;
var res2=company.childNodes(1).firstChild.data;
var res3=company.childNodes(2).firstChild.data;
var res4=company.childNodes(3).firstChild.data;
var res5=company.childNodes(4).firstChild.data;
var res6=company.childNodes(5).firstChild.data;
var res7=company.childNodes(6).firstChild.data;

[satyanarayana49]

Hi Dave,

I am getting the output like this:
If i select a company from the list,it is alerting "ALERT 1 undefined selected undefined".If i click ok then it is alerting "ALERT 2 MATCH".If i click ok then the DDLs are populating with the first company details and again alerting "ALERT 1 undefined selected undefined".If i click ok it is alerting "ALERT 2 MATCH".Then on clicking ok,the DDLs are populated with second company details and alerting "ALERT 1 undefined selected undefined"......

This happens until the DDLs are filled with last company details.

Also,if i try to alert selectedCompany from any where in the code, i get response as undefined.

So the problem would be with selectedCompany and company.id.

So, what should i do now?

[daveVk]

Ok we seem to have 2 problems "company.id" is undefined and "selectedCompany" is undefined according to alerts.

FIX THIS LINE ( note selectedIndex is single word, options NOT option )

var selectedCompany = companyList.options[companyList.selectedIndex].value;

CHANGE ( my error )

if(company.id == selectedCompany)

TO

if(company.getAttribute('id') == selectedCompany)

and similarly change "company.id" in alerts

good luck

[satyanarayana49]

Thanks Dave,

I made changes as u had mentioned.
Now i am getting the alert as "ALERT 1 Boeing selected undefined".If i click ok then it is alerting "ALERT 1 Microsoft selected undefined".Then on clicking ok, it is alerting "ALERT 1 Cisco selected undefined".If i click ok,the DDLs are not getting populated and remain blank only.

So the problem with company.id is solved.

problem with selectedCompany is still existing.I declared it before any function declarations.see this....

<script type="text/javascript">

var XmlHttpObj;
var companyList = document.getElementById("companyDDL");
var selectedCompany = companyList.options[companyList.selectedIndex].value;

function CreateXmlHttpObj(){
........

I coldn't alert selectedCompany from anywhere in the script.So one thing i noticed is that the selectedCompany variable couldn't get the selected value from DDL.

[daveVk]

Problem possibly with html of company dropdown, option tags should have value="..." atributes like below example. If unsure please post html for you dropdown.

<SELECT NAME="company" >
<OPTION VALUE="IBM">IBM
...
</SELECT>

[daveVk]

You seem to have quessed there is a problem with the scope of "selectedCompany" Try placing this code in both original position and immediately prior to loop

THIS CODE

var companyList = document.getElementById("companyDDL");
var selectedCompany = companyList.options[companyList.selectedIndex].value;

PRIOR TO

for(var i=0; company=companys[i++];)

AND PRIOR TO

var requestUrl;
requestUrl = "./DataAccess/XMLFile.xml" + "?companyDDL=" +
encodeURIComponent(selectedCompany);

It does not seem to be really required in the second case as the requistUrl returns all companies, so try code below, when you get the rest to work Ok.

var requestUrl = "./DataAccess/XMLFile.xml";

[satyanarayana49]

This is my html.......

<body>
<div>
<select id="companyDDL" style="width: 342px" onchange="companyListOnChange()" runat="server">
<option selected="selected" value="Boeing">Boeing</option>
<option value="Microsoft">Microsoft</option>
<option value="Cisco">Cisco</option>
<option value="Praveenya">Praveenya</option>
</select>
<br />
<select id="examDDL" style="width: 221px">
</select>
<br />
<select id="versionDDL" style="width: 221px">
</select>
<br />
<select id="classDDL" style="width: 221px">
<option selected="selected"></option>
</select>
</div>
</body>

[satyanarayana49]

Hooorrey...its working
I put selectedCompany prior to the loop,i deleted the query string from the requestUrl and it's been working.
Now if i select a company, the DDLs are getting populated with the appropriate values.

So,the query string has nothing to do with the URL.I think they put the query string for the server side handling(processing) of ajax request.

How can we handle ajax request(http) on asp.net web server?

I have one more doubt.....

can't we call a variable which is declared globally(i.e not inside a function or a method)from inside a function?
If i declare...

var companyList = document.getElementById("companyDDL");
var selectedCompany = companyList.options[companyList.selectedIndex].value;

....prior to any function declaration,i am not able to call it from a function like this....

if(company.getAttribute('id') == selectedCompany)

selectedCompany is a global variable and i can use it anywhere,but why can't i call it from the loop?

Anyway, Thanks Dave,Thank you very much.I got rid of my problem because of u only.

[daveVk]

sorry no experience of asp.net

yes it could have been done with a global variable

declare the variable outside of any function like line below

var selectedCompany;

but you will need set selectedCompany within an function (when it changed ) like this WITHOUT a var

var companyList = document.getElementById("companyDDL");
selectedCompany = companyList.options[companyList.selectedIndex].value;

Regards Dave.

[satyanarayana49]

okay...Thanks Dave

Do u know how to populate DDLs from database without refreshing the page using ajax?

Thanks & Regards,
Satyanarayana

[daveVk]

Do u know how to populate DDLs from database without refreshing the page using ajax?

You already have a good solution for the client(browser) side of it. You mentioned asp.net so I assume you need microsoft server solution. My limited experience is with php and sql under linux. Try posting question regarding database aspect on forum specific to technology you have in mind.

Dave