AJAX

Firefox and chained select menus

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2008

Posts: 5

Reputation: DorsetBloke is an unknown quantity at this point

Solved Threads: 0

DorsetBloke DorsetBloke is offline

Offline

Newbie Poster

Firefox and chained select menus

Dec 8th, 2008

Hi all,

I have a problem with a script that is driving me round the bend and I do hope someone can shed some light on the matter. I am new to Javascript and need a nudge in the right direction.

I have three select menus - Country, Region and County.

If you select a Country, the Region menu updates. If you then choose a Region, the County menu updates.

I have used a script from GreatASP.co.uk and, after a small amount of fiddling and a large amount of swearing, I have this working in IE but Firefox doesn't even try:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<SCRIPT LANGUAGE="Javascript">
 
function getSelect(selectname,selection,recordset,destination){
 
	if(selection!=''){
 
	 var doc = null; 
 
// Make a new XMLHttp object
 
   if (typeof window.ActiveXObject != 'undefined' ) 
   { 
       doc = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else 
   { 
       doc = new XMLHttpRequest(); 
   }
 
// Load the result from the response page
 
	if (doc){ 	 
		doc.open("GET", "populate.asp?selectname="+selectname+"&selection=" + selection+"&recordset="+recordset, false);
		doc.send(null);
// Write the response to the div
		destination.innerHTML = doc.responseText;
	}else{
		destination.innerHTML = 'Browser unable to create XMLHttp Object';
		}
}else{
// Return the next select box back to the default
destination.innerHTML= '<select><option value=""></option></select>';
}
 
selectname= null
selection = null
recordset = null
 
}
</SCRIPT>
<SCRIPT LANGUAGE="Javascript">

function getSelect(selectname,selection,recordset,destination){
	
	if(selection!=''){

	 var doc = null; 

// Make a new XMLHttp object

   if (typeof window.ActiveXObject != 'undefined' ) 
   { 
       doc = new ActiveXObject("Microsoft.XMLHTTP"); 
   } 
   else 
   { 
       doc = new XMLHttpRequest(); 
   }
	 
// Load the result from the response page

	if (doc){ 	 
		doc.open("GET", "populate.asp?selectname="+selectname+"&selection=" + selection+"&recordset="+recordset, false);
		doc.send(null);
// Write the response to the div
		destination.innerHTML = doc.responseText;
	}else{
		destination.innerHTML = 'Browser unable to create XMLHttp Object';
		}
}else{
// Return the next select box back to the default
destination.innerHTML= '<select><option value=""></option></select>';
}

selectname= null
selection = null
recordset = null

}
</SCRIPT>

In the original version from GreatASP, the author puts the following line about the function declaration, but I have found that this actually stops the code from working in IE.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
// declare new variables for each new div that you add, and link to the div by ID
var subcatdiv = document.getElementById("subcat_div");
// declare new variables for each new div that you add, and link to the div by ID
var subcatdiv = document.getElementById("subcat_div");

Obviously, I changed the variable name and div name to suit.

I can see what it's for, in that you have to define the variable before the function calls it - indeed, Firefox warns me in the error console if the above line(s) are not included, but still doesn't work when I put them in. It says regiondiv is not defined.

The DOCTYPE of the HTML file is 4.01 Transitional if that helps at all.

The HTML that calls the function is:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<DIV ID="countrydiv">
<SELECT NAME="Area" onchange="getSelect('Area', this.value,'Region',regiondiv);">
<OPTION>Country1</OPTION>
<OPTION>Country2</OPTION>
</SELECT>
</DIV>
 
<DIV ID="regiondiv">
<SELECT NAME="Area" onChange="getSelect('Area', this.value,'County',countydiv);">
</SELECT>
</DIV>
 
<DIV ID="countydiv">
<SELECT NAME="Area">
<OPTION></OPTION>
</SELECT>
</DIV>
<DIV ID="countrydiv">
<SELECT NAME="Area" onchange="getSelect('Area', this.value,'Region',regiondiv);">
<OPTION>Country1</OPTION>
<OPTION>Country2</OPTION>
</SELECT>
</DIV>

<DIV ID="regiondiv">
<SELECT NAME="Area" onChange="getSelect('Area', this.value,'County',countydiv);">
</SELECT>
</DIV>

<DIV ID="countydiv">
<SELECT NAME="Area">
<OPTION></OPTION>
</SELECT>
</DIV>

I have tried replacing various parts of the code with getElementById calls but nothing seems to work. The above code is the only variation of dozens that seems to work in IE and I have never got it to do anything in Firefox.

I realise I have 3 SELECTs called Area - this is because the form needs to produce a URL string that groups Country, Region and County together, separated by commas.

Please help!

Thanks.

•

Join Date: Nov 2008

Posts: 91

Reputation: brechtjah is an unknown quantity at this point

Solved Threads: 9

brechtjah

Offline

Junior Poster in Training

Re: Firefox and chained select menus

Dec 8th, 2008

<SCRIPT LANGUAGE="Javascript"> is depreciated, use type instead:
<script type="text/javascript">
capital tags are not needed by the way, just so you know : - )

Your problem probably lies here:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<DIV ID="countrydiv">
<SELECT NAME="Area" onchange="getSelect('Area', this.value,'Region','regiondiv');">
<OPTION>Country1</OPTION>
<OPTION>Country2</OPTION>
</SELECT>
</DIV>
 
<DIV ID="regiondiv">
<SELECT NAME="Area" onChange="getSelect('Area', this.value,'County','countydiv');">
</SELECT>
</DIV>
<DIV ID="countrydiv">
<SELECT NAME="Area" onchange="getSelect('Area', this.value,'Region','regiondiv');">
<OPTION>Country1</OPTION>
<OPTION>Country2</OPTION>
</SELECT>
</DIV>

<DIV ID="regiondiv">
<SELECT NAME="Area" onChange="getSelect('Area', this.value,'County','countydiv');">
</SELECT>
</DIV>

When you call getSelect(), you are forgetting to put single quotes around the div's name too.

•

Join Date: Dec 2008

Posts: 5

Reputation: DorsetBloke is an unknown quantity at this point

Solved Threads: 0

DorsetBloke DorsetBloke is offline

Offline

Newbie Poster

Re: Firefox and chained select menus

Dec 9th, 2008

Hi,

Thanks very much for your help.

I tried the code with the apostrophe around the div name in the getSelect as suggested, and changed the language to type. Firefox still refuses to work. I also tried adding in the code that I had left out and that broke IE, as usual.

Could there be a conflict in that I have my SELECTs with the same name of 'Area' ?

Annoyingly, even though I have copied the code from GreatASP, his example on that site works in Firefox.

Any other ideas much appreciated!

•

Join Date: Nov 2008

Posts: 91

Reputation: brechtjah is an unknown quantity at this point

Solved Threads: 9

brechtjah

Offline

Junior Poster in Training

Re: Firefox and chained select menus

Dec 12th, 2008

•

Originally Posted by DorsetBloke

Could there be a conflict in that I have my SELECTs with the same name of 'Area' ?

Yes that is very much the problem : ) You have to give each selectbox a unique name.

Please also make sure you changed the whole thing:
<script type="text/javascript">
and NOT
<script type="javascript">

Good luck