Issue populating a select box from database using AJAX in IE

[AdriftUniform]

Hi,

I am having an issue getting my select boxes working in IE. My current situation is that I have 2 select boxes, 1 for Styles and another for Substyles. Not all Styles have a Substyle, but each Style has a different Substyle, so when should happen is when you select a Style AJAX go and gets all of the matching Substyes for that Style.

This actually works in Firefox, Google Chrome, Opera and so on, but does not work in IE. Here is my code:

This is the JavaScript.

function getXMLHTTP()
{ 
	var xmlhttp=false;	
	try
	{
		xmlhttp=new XMLHttpRequest();
	}
	catch(e)	
	{
		try
		{			
			xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e)
		{
			try
			{
				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e1)
			{
				xmlhttp=false;
			}
		}
	}
		 	
	return xmlhttp;
}
	
function getSubstyle(styleId) 
{		
	var strURL="getsubstyle.php?style="+styleId;
	var req = getXMLHTTP();
	
	if (req) 
	{					
		req.onreadystatechange = function() 
		{						
			if (req.readyState == 4) 
			{						
				if (req.status == 200) 
				{				
					document.getElementById('substylediv').innerHTML = req.responseText;						
				} 
				else 
				{
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}		
}
</script>

Here is my HTML/PHP that populates the select boxes:

<h3>Style:</h3>
	<select name='style' onChange='getSubstyle(this.value)'>
	<option value='0'> - Select Style - </option>
<?php		
	while ($row = mysql_fetch_assoc($result))
	{
		$id = $row['styId'];
		$name = $row['styName'];
		echo "<option value='$id'>$name</option>";
	}
?>	
	</select>

	<select name="substyle" id="substylediv">
	<option value="0"> - Select Substyle - </option>
	</select>

And here is the getsubstyle.php page that is collected by the JavaScript

<?php 
include_once 'tables.php';

$style = intval($_GET['style']);

$result = queryMysql("SELECT subId, subName FROM substyle WHERE subCategory='$style'");

while ($row = mysql_fetch_assoc($result))
{
	$id = $row['subId'];
	$name = $row['subName'];
	echo "<option value='$id'>$name</option>";
}

	echo $id;	
?>

Just to clarify, all of my PHP is working 100% and as far as I am aware my HTML is also fine, I have done some checks with the JavaScript and im 80% sure that the problem lies on line 47 which reads:

document.getElementById('substylediv').innerHTML = req.responseText;

I hope some can help me get this working.

Thanks

[SolidSolutions]

any chance you can provide a link?

[AdriftUniform]

I fixed this by using JQuery instead, here is my JQuery:

<script language="javascript" type="text/javascript">

function jqueryGetSubstyle(styleId)
{
	$.ajax({
		url : "getsubstyle.php",
		type : "GET",
		data : "style="+styleId,
		dataType : "html",
		success : function(rtn)
		{
			$('#substylediv').html(rtn);		
		}
	});
}
</script>