Ajax List, Working but need to tweak

[adamjblakey]

Hi,

I am using the following function to do a country/region ajax drop down list.

// JavaScript Document

	var AdminResponse = "";

	function parseResponse(){

		var nText = AdminResponse.getElementsByTagName('optionText');
		var nVal = AdminResponse.getElementsByTagName('optionVal');
		document.forms[0]['region'].options.length = 1;
		for (i=0; i<nText.length; i++)
			{ 
			 var nOption = document.createElement('option'); 
			 var isText = document.createTextNode(nText[i].firstChild.data); 
			 nOption.setAttribute('value',nVal[i].firstChild.data); 
			 nOption.appendChild(isText); 
			 document.forms[0]['region'].appendChild(nOption); 
			}
	}

	function update(nVal){

		var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();   
		AdminRequest.onreadystatechange = function()
			{
		 	 if (AdminRequest.readyState == 4)
				{
		 	 	 if (AdminRequest.status == 200)
					{
			 	 	 AdminResponse = AdminRequest.responseXML;
			 	 	 parseResponse();
					}
		 	 	 else 	{
				 	 alert('Error Update.php File '+ AdminRequest.statusText);
					}
				}
			}
		var infoStr = "?choice="+nVal;
		AdminRequest.open("GET", "Update.php"+infoStr, true);
		AdminRequest.send(null); 
	}

This will bring a list of regions based on what country is selected, what i need though is when a region is selected another list is generated with towns.

So basically i need the above duplicating but don't know which bits need changing.

Thanks in advanced for the help.

Cheers,
Adam

[acoder]

You will need to add an onchange to the second select element which will either make another Ajax request to get the cities or you could load the cities when you change the region.

[adamjblakey]

Hi,

Yes i have done this but i need to duplicate the javascript function above to do this but don't know which bits to change to make it so it is not using the same variables etc.

Cheers,
Adam

[acoder]

It's "region" that you want to replace with something more generic.

Use a string as an argument in parseResponse() for the name of the select element.

[adamjblakey]

Need help with this..

[CODE=javascript]var AdminResponse = "";

function parseResponse() {

var nText = AdminResponse.g etElementsByTag Name('optionTex t');
var nVal = AdminResponse.g etElementsByTag Name('optionVal ');
document.forms[0]['region'].options.length = 1;
for (i=0; i<nText.length ; i++)
{
var nOption = document.create Element('option ');
var isText = document.create TextNode(nText[i].firstChild.dat a);
nOption.setAttr ibute('value',n Val[i].firstChild.dat a);
nOption.appendC hild(isText);
document.forms[0]['region'].appendChild(nO ption);
}
}

function update(nVal){

var AdminRequest = window.ActiveXO bject ? new ActiveXObject(" Microsoft.XMLHT TP") : new XMLHttpRequest( );
AdminRequest.on readystatechang e = function()
{
if (AdminRequest.r eadyState == 4)
{
if (AdminRequest.s tatus == 200)
{
AdminResponse = AdminRequest.re sponseXML;
parseResponse() ;
}
else {
alert('Error Update.php File '+ AdminRequest.st atusText);
}
}
}
var infoStr = "?choice="+nVal ;
AdminRequest.op en("GET", "Update.php"+in foStr, true);
AdminRequest.se nd(null);
}[/CODE]

[gits]

and what is your question?

kind regards

[adamjblakey]

Sorry about that i though i had included my question.

What this function does is when i select a region from a list it dynamically fills the town list with the relevant towns.

My problem is that i have 3 fields for regions and 3 towns so i need to replicate this function 3 times but don't know which bits to change so that it is different enough 3 times over.

Please can someone help me replicate this another 2 times.

Thanks in advanced.
Adam

[acoder]

Merged threads since it's effectively the same problem.

You just need to make the functions generic using parameters so that they can refer to any number of select elements.

[adamjblakey]

Thank you for your reply, my knowledge of JavaScript is very limited, would you be able to give me some pointers on what i need to do please.

[acoder]

As an example,[CODE=javascript] function parseResponse(f ield){

var nText = AdminResponse.g etElementsByTag Name('optionTex t');
var nVal = AdminResponse.g etElementsByTag Name('optionVal ');
document.forms[0][field].options.length = 1;
for (i=0; i<nText.length ; i++)
{
var nOption = document.create Element('option ');
var isText = document.create TextNode(nText[i].firstChild.dat a);
nOption.setAttr ibute('value',n Val[i].firstChild.dat a);
nOption.appendC hild(isText);
document.forms[0][field].appendChild(nO ption);
}
}

function update(nVal, field){

var AdminRequest = window.ActiveXO bject ? new ActiveXObject(" Microsoft.XMLHT TP") : new XMLHttpRequest( );
AdminRequest.on readystatechang e = function()
{
if (AdminRequest.r eadyState == 4)
{
if (AdminRequest.s tatus == 200)
{
AdminResponse = AdminRequest.re sponseXML;
parseResponse(f ield);
}
else {
alert('Error Update.php File '+ AdminRequest.st atusText);
}
}
}
var infoStr = "?choice="+nVal ;
AdminRequest.op en("GET", "Update.php"+in foStr, true);
AdminRequest.se nd(null);
}[/CODE]See how I've added field to update(). This is the name of the field. In parseResponse() , I've replaced "region" with field, so you just need to pass the name of the element when you call update().

[adamjblakey]

As an example,[CODE=javascript] function parseResponse(f ield){

var nText = AdminResponse.g etElementsByTag Name('optionTex t');
var nVal = AdminResponse.g etElementsByTag Name('optionVal ');
document.forms[0][field].options.length = 1;
for (i=0; i<nText.length ; i++)
{
var nOption = document.create Element('option ');
var isText = document.create TextNode(nText[i].firstChild.dat a);
nOption.setAttr ibute('value',n Val[i].firstChild.dat a);
nOption.appendC hild(isText);
document.forms[0][field].appendChild(nO ption);
}
}

function update(nVal, field){

var AdminRequest = window.ActiveXO bject ? new ActiveXObject(" Microsoft.XMLHT TP") : new XMLHttpRequest( );
AdminRequest.on readystatechang e = function()
{
if (AdminRequest.r eadyState == 4)
{
if (AdminRequest.s tatus == 200)
{
AdminResponse = AdminRequest.re sponseXML;
parseResponse(f ield);
}
else {
alert('Error Update.php File '+ AdminRequest.st atusText);
}
}
}
var infoStr = "?choice="+nVal ;
AdminRequest.op en("GET", "Update.php"+in foStr, true);
AdminRequest.se nd(null);
}[/CODE]See how I've added field to update(). This is the name of the field. In parseResponse() , I've replaced "region" with field, so you just need to pass the name of the element when you call update().

Thanks for that, it makes a lot more sense now.

I am still a little confused though. Basically on her you do something like this? onChange="updat e(this.value || field=town)"

I does not work though?

[acoder]

No, it should be called like this:

onchange="update(this.value,'town')"

[adamjblakey]

Thanks a million, works a treat :)

[acoder]

Righto, glad it's working.