[SOLVED] "Call" differences between IE & FF?

woolyg · April 18, 2008

Hi all,

By clicking on a link, I'm calling the following function:


function pick_scorers(match_id, sport_id){	
 var t1s = document.getElementById('team1_score_' + match_id);
 var t2s = document.getElementById('team2_score_' + match_id);

 getData("codebin/play_pick_scorers.php?match_id=" + match_id + "&sport_id=" + sport_id, 'pick_scorers_div_' + match_id);

 getData("codebin/play_temporary_picks.php?match_id=" + match_id + "&sport_id=" + sport_id + "&blank=1", 'picks_temp_div_' + match_id);


}

..which basically calls 2 different PHP pages into 2 DIVs, just below the link.

What I'm finding id that in IE7, only the FIRST getData part of the function is called, which means only one div populates.

In FF (2.0.0.13) both of the divs become populated!

Has anyone out there come across this before? Is there a way to tell IE to follow each & every call to getData within the function?

V. Annoying, as I'd like this function to work cross-browser!

All help appreciated,

WoolyG

shankar23 · April 19, 2008

Hi

Have you used both name and id (Html entities) while designing html form???

Because at some times this also make IE not respond properly...

So check out this..And try again..

thanks

Shang..

woolyg · April 20, 2008

Hi Shang,

Yes, the name and ID entities of the form have been set. I've looked a bit more into it, and it appears that only the very last getData process in the function is taking effect each time - if I switch them around, the different info populates from the last process.

The most annoying thing is that I can't properly debug it, as it's working absolutely fine in Firefox!

Any ideas?

Do AJAX functions disallow multiple getData calls in IE?

woolyg · April 20, 2008

Hi Shang,

I've put together an example of my code for download here http://www.granconz.com/working/ajax.zip (just 3 simple pages - 2kb). If you put them into a folder and open them in IE, and then FF, you'll see what I mean.

Here is the actual code I'm using:

index.php:

<!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:

<!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:

<!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>

woolyg · April 22, 2008

I've found the problem, for anyone who's experiencing this issue - the way I've put my getData() function was incorrect. The following JS will allow for multiple calls be made, and not lost:

function getData(dataSource, divID) {
	var XMLHttpRequestObject = false;

	if (window.XMLHttpRequest) {
		XMLHttpRequestObject = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
		XMLHttpRequestObject = new
		ActiveXObject("Microsoft.XMLHttp");
		}


	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;
				delete XMLHttpRequestObject;
				XMLHttpRequestObject = null;
				}
		}
	XMLHttpRequestObject.send(null);
	}
}

...Solved. Thanks - WoolyG

shankar23 · April 22, 2008

hi make change your index.php

should be like this:

XMLHttpRequestObject.open("GET", dataSource,false);

and not like this :

XMLHttpRequestObject.open("GET", dataSource);

thanks,

Shang..

woolyg · April 22, 2008

Hi Shang,

I will - what will this do? Does this make it asynchronous instead of synchronous?

Thanks,

WoolyG

shankar23 · April 22, 2008

Yes you are correct you need to set asynchronous property while you using Ajax GET or POST.

woolyg · April 22, 2008

Ah yes - I'm learning!!

Thanks Shang,

Woolyg

Sign In

[SOLVED] "Call" differences between IE & FF?

Recommended Posts

woolyg

Link to comment

Share on other sites

shankar23

Link to comment

Share on other sites

woolyg

Link to comment

Share on other sites

woolyg

Link to comment

Share on other sites

woolyg

Link to comment

Share on other sites

shankar23

Link to comment

Share on other sites

woolyg

Link to comment

Share on other sites

shankar23

Link to comment

Share on other sites

woolyg

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information