IE AJAX select tag options

[heals1ic]

I have a script that involves replacing dropdown options via ajax and javascript:

<script type="text/javascript">
var url = "pref.php?catid="; // The server-side script
function handleHttpResponse() {	
	if (http.readyState == 4) {
		if(http.status==200) {
			var results=http.responseText;
			var resultarray = new Array();
			resultarray = results.split("|", 3);
			for (var i=0; i<3; i++) {
				document.getElementById('pref_'+(i+1)).innerHTML = resultarray[i];
			}
		}
	}
}

function requestPrefs() {
	var cat = document.getElementById('catselect');
	var id = cat.options[cat.selectedIndex].value;
	http.open("GET", url + escape(id) + "&userid=<?=$_SESSION['user_id']?>", true);
	http.onreadystatechange = handleHttpResponse;
	http.send(null);
}
function getHTTPObject() {
	var xmlhttp;
	if(window.XMLHttpRequest){
		xmlhttp = new XMLHttpRequest();
	}
	else if (window.ActiveXObject){
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		if (!xmlhttp){
			xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
	}
	return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
<form action="pref.php" method="post">
<select id="catselect" size="7" name="catid" onChange="requestPrefs();">
<option value="1">cat1</option>
<option value="2">cat2</option>
</select>
<select id="pref_1" name="pref_1">
<option value="">-- Select --</option>
</select>
<select id="pref_2" name="pref_2">
<option value="">-- Select --</option>
</select>
<select id="pref_3" name="pref_3">
<option value="">-- Select --</option>
</select>

The data returned in the results variable is a string of option elements with the selected option in this string. The string is separated by a delimeter to allocate the 3 option lists into arrays for the 3 select dropdowns.

This code works fine for Firefox but will not populate the select elements in IE.

[phpnovice]

Without running this through a script debugger, I can only surmise two possible reasons why this is failing. Either this:

document.getElementById('pref_'+(i+1)).innerHTML = resultarray[i];

should be more like this:

document.forms[0].elements['pref_'+(i+1)].innerHTML = resultarray[i];

or, IE just doesn't like the use of innerHTML to create the Options object within a SELECT.

[heals1ic]

I have a feeling that innerHTML (with reguards to select tags) is an issue for IE even though by definition it's use meets all the criteria. Typical of Microsoft.

Would it be a better option for the server script to produce XML elements and then parse these into the select dropdowns from the client side? How then can I have options in these dropdowns preselected? It was easier to predefine the option elements from the server side before transferring them to the client.

My original intention was to be as light on in processing for the client side as possible. No too many iterations of arrays etc. Seems like IE is going to be a pain in the ass though.

Any ideas?

[phpnovice]

To hear some people speak, they would condemn you for using innerHTML in the first place. At any rate... The only additional thing I have to offer you is that you can replace the entire SELECT using the method you've already got, or you can go to iterative processing and use this as your base reference:

var opt = document.forms[0].elements['pref_'+(i+1)].options;

and this as your iterative process:

opt[opt.length] = new Option(strText, strValue, blnDefaultSelected, blnSelected);

[heals1ic]

To hear some people speak, they would condemn you for using innerHTML in the first place

More information on this?
What if any, is the preferred method then?

Am I barking up the wrong tree to solve this issue?

[phpnovice]

Originally Posted by heals1ic

More information on this?
What if any, is the preferred method then?

Oh, you're getting me started... The supposed "purists" have a tendancy to turn up their collective noses at any innovative ideas MS comes up with on its own. The supposed "purists" think that if it doesn't come from the W3C first, then it is "bad" practice and "invalid" usage. The W3C, themselves, has this problem, too. Why do you think they call IE standard operations "quirks" mode? There's nothing intrinsically wrong with the way IE does things. IE was doing it long before there were standards defining any other way to do it. Because of its forgiving nature, it is the easiest browser to design for because of those very "quirks" at which the supposed "purists" turn up their noses.

Case in point:
http://www.webdeveloper.com/forum/sh...ad.php?t=61505

So, we come to innerHTML... This allows script to quickly and efficiently create, modify, and remove dynamic HTML elements. In their obstinancy, the W3C apparently wants this to only be done using approved methods and in OO fashion. Not that there's anything intrinsically wrong with OO, but we're talking about an interpreted language here and, thus, there isn't the luxury in response time and performance that you'd have with a compiled language. In short, performance and response time is slower if you stick to the approved methods for creating, modifying, and removing dynamic HTML elements. In fact, I've heard that the W3C is having to bow to pressure from other sources and is (finally) including innerHTML in the standards.

Originally Posted by heals1ic

Am I barking up the wrong tree to solve this issue?

No, of course not. I already gave you the solution -- replace the entire SELECT element using innerHTML (not just the options), or go back to an iterative process and construct each Option one at a time.