Ajax getData command failing in IE..?

woolyg · 04-20-2008, 07:50 PM

Hi all,

I'm relatively new to AJAX, and I'm attempting to populate 2 different DIV's with info from 2 different PHP files, by clicking just the one link.

What I'm finding is that it works in Firefox (v.2.0.0.13), but not in Internet Explorer (v7)!
Here's the code I'm using - if you copy the 3 files into a folder on a testing server and open index.php in a browser (FF, then IE), you should see what I'm getting:

index.php:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testing the GET DATA Process</title>

<script type="text/javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
			{
				if(XMLHttpRequestObject) 	{
					var obj = document.getElementById(divID);
					XMLHttpRequestObject.open("GET", dataSource);
					XMLHttpRequestObject.onreadystatechange = function()
												{
								if (XMLHttpRequestObject.readyState == 4 &&
								XMLHttpRequestObject.status == 200) 	{
									obj.innerHTML = XMLHttpRequestObject.responseText;
																		}
												}
					XMLHttpRequestObject.send(null);
											}
			}
			
function pick_scorers(match_id){	
	
	 getData("firstpage.php?match_id=" + match_id + "&blank=1", 'div_1'); // Get the first set of details and put them into div_1
	 getData("secondpage.php?match_id=" + match_id, 'div_2'); // Get the second set of details and put them into div_2
	 
}
</script>
</head>
<body>

Click on <a href="javascript:pick_scorers('1')">this link</a>  to test the script. In FireFox, both of the DIVs below populate OK. In IE, only one of them does.

<div id="div_1" name="div_1"></div>
<div id="div_2" name="div_2"></div>

</body>
</html>

firstpage.php:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

First Page

</body>
</html>

secondpage.php:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>

Second Page

</body>
</html>

Can anyone tell me why IE won't populate the relative info? It seems like it's only paying attention to the very last getData call in the pick_scorers() function - when I flip the getData calls around in the function, only the last one takes effect.

All help is appreciated, I am much confused by this one!

WoolyG

Ajax getData command failing in IE..?

Ajax getData command failing in IE..?

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads