AJAX problem with IE

@stargateanubis1Oct 24.2008

Hello, first off, let me tell you that yes, i’m new at doing this, but i HAVE tried to do this on my own before asking for help.
I have a basic chat applications of which i’m using AJAX. Its based in an html file, and the results are directed to a div with the id “showchat”.
The javascript file is this:

[CODE]var xmlHttp

function getchat() { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert (“Browser does not support HTTP Request”) return } var url=”maintest.php” xmlHttp.onreadystatechange=stateChanged xmlHttp.open(“GET”,url,true) xmlHttp.send(null) }

function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”) { document.getElementById(“showchat”).innerHTML=xmlHttp.responseText } }

function GetXmlHttpObject() { var xmlHttp=null; try { return new XMLHttpRequest(); } catch(e) {} try { return new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) {} try { return new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) {} alert(“XMLHttpRequest not supported”); return null; return xmlHttp; }[/CODE]

“maintest.php” simply queries the database for the 25 most recent chats, and prints them out.

This works with the “good” browswers (such as firefox), but not with IE. It gives me the error that “‘xmlhttp’ is undefined”.

Again, i’m new at AJAX, so i dont quite know the ins and outs of how things work differently between browsers.

If you need any other information, just let me know

to post a comment

JavaScript

13 Comments(s) _↴

@toicontienOct 24.2008 — #Your try-catch blocks all need to be nested:

function GetXmlHttpObject()
 {
 var xmlHttp = null;
 try {
 xmlHttp =  new XMLHttpRequest();
 } catch(e) {
 try {
 xmlHttp =  new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try {
 xmlHttp =  new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e) {
 if ( !GetXmlHttpObject.failedDetection )
 alert("Your browser does not support AJAX.");
 GetXmlHttpObject.failedDetection = true;
 }
 }
 }
 }
 return xmlHttp;
 }
 GetXmlHttpObject.failedDetection = false;

@stargateanubis1authorOct 24.2008 — #i changed it,yet it does not work on either FF or IE now...i'll play around and post if results change

@stargateanubis1authorOct 24.2008 — #okay...it works in firefox, but now the page isn't updating at all with IE.

In firefox, the user enters the data, and the chat updates. In IE, the user enters data, it doesn't update...ALSO, when the page is refreshed, it doesn't update, so there is a slight communication problem goin in...

oh...sorry for double post....just updating

@toicontienOct 24.2008 — #Perhaps it's not an AJAX problem then? Can you throw an alert() in to ensure the AJAX object is not being instantiated in Internet Explorer?

@stargateanubis1authorOct 24.2008 — #i put an alert here:

[CODE]if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 alert("Working");
 document.getElementById("showchat").innerHTML=xmlHttp.responseText 
 } 
 [/CODE]

In IE it doesn't alert...

Did you want an alert somewhere else? (thats the only place that i saw would actually be contingent on an if...

@toicontienOct 24.2008 — #Put the alert() so it alerts the actual variable that is the XMLHttpRequest object, i.e. something like:

var x = GetRequestObject();
 alert( x );

@stargateanubis1authorOct 24.2008 — #okay...wierd...its not even calling the function in IE.... (at least thats what i'm deducing)

THis is the current code:

[CODE]var xmlHttp
 
 function getchat(str)
 { 
 xmlHttp=GetXmlHttpObject()
 alert(xmlHttp);
 if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
 var url="maintest.php"
 xmlHttp.onreadystatechange=stateChanged 
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 }
 
 function stateChanged() 
 { 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 alert("REaDY");
 document.getElementById("showchat").innerHTML=xmlHttp.responseText 
 } 
 }
 
 function GetXmlHttpObject()
 {
 var xmlHttp = null;
 try 
 {
 xmlHttp =  new XMLHttpRequest();
 } 
 catch(e)
 {
 try 
 {
 xmlHttp =  new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 try 
 {
 xmlHttp =  new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (e)
 {
 if ( !GetXmlHttpObject.failedDetection )
 {
 alert("Your browser does not support AJAX.");
 GetXmlHttpObject.failedDetection = true;
 }
 }
 }
 }
 return xmlHttp;
 }
 GetXmlHttpObject.failedDetection = false;[/CODE]

@stargateanubis1authorOct 24.2008 — #Just for sake of putting it out there...here are the files used (so all info that's needed is had)

maintest.html

[CODE]<html>
 <head>
 <script src="testupdate.js">
 </script>
 <script type="text/javascript">
 function doupdate()
 {
 
 setTimeout("getchat()",50);
 setTimeout("doupdate()",500);
 }
 setTimeout("doupdate()",1);
 </script>
 </head>
 <body bgcolor="#000000">
 <p>
 <div id="showchat"><b>Chat is loading...</b></div>
 </p>
 </body>
 </html>[/CODE]

testupdate.js

[CODE]var xmlHttp
 
 function getchat(str)
 { 
 xmlHttp=GetXmlHttpObject()
 alert(xmlHttp);
 if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
 var url="maintest.php"
 xmlHttp.onreadystatechange=stateChanged 
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 }
 
 function stateChanged() 
 { 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 alert("REaDY");
 document.getElementById("showchat").innerHTML=xmlHttp.responseText 
 } 
 }
 
 function GetXmlHttpObject()
 {
 var xmlHttp = null;
 try 
 {
 xmlHttp =  new XMLHttpRequest();
 } 
 catch(e)
 {
 try 
 {
 xmlHttp =  new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 try 
 {
 xmlHttp =  new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (e)
 {
 if ( !GetXmlHttpObject.failedDetection )
 {
 alert("Your browser does not support AJAX.");
 GetXmlHttpObject.failedDetection = true;
 }
 }
 }
 }
 return xmlHttp;
 }
 GetXmlHttpObject.failedDetection = false;[/CODE]

maintest.php

[CODE]<body bgcolor=#000000>
 <?php
 
 include "connect.php";
 
 $getnummessages="SELECT COUNT(*) as messagecount from chatmessages";
 
 $getnummessages2=mysql_query($getnummessages) or die("blah");
 
 $getnummessages3= mysql_result($getnummessages2, 0);
 
 if($getnummessages3>41)
 
 {
 
 $startrow=$getmessages3-40;
 
 }
 
 else
 
 {
 $startrow=1;
 
 }
 
 $getmsg="SELECT name, message from chatmessages order by postime DESC limit 0,20";
 
 $getmsg2=mysql_query($getmsg) or die(mysql_error());
 
 while($getmsg3=mysql_fetch_array($getmsg2))
 
 {
 
 $message=Smiley($getmsg3[message]); //Smiley faces
 
 print "<font color='red'><b>$getmsg3[name]:</b></font>"; 
 print "<font color='white'>$message</font><br>";
 
 
 
 }
 
 
 
 
 function Smiley($texttoreplace)
 
 {
 
  $smilies=array(
 
  ':)' => "<img src='Smiley/happy_3.gif'>",
  ':(' =>"<img src='Smiley/Cry_2.gif'>",
  ';)' =>"<img src='Smiley/wink_1.gif'>",
  ':D' =>"<img src='Smiley/Happy_1.gif'>",
  ':O' =>"<img src='Smiley/afraid_1.gif'>",
  ':S' =>"<img src='Smiley/afraid_2.gif'>",
  ':!(' =>"<img src='Smiley/angry_1.gif'>",
  ':!:' =>"<img src='Smiley/angry_2.gif'>",
  ':???:' =>"<img src='Smiley/confused_1.gif'>",
  ':whacko:' =>"<img src='Smiley/confused_2.gif'>",
  ":'(" =>"<img src='Smiley/cry_1.gif'>",
  ':x-:' =>"<img src='Smiley/dead_2.gif'>",
  ':]' =>"<img src='Smiley/happy_2.gif'>",
  'O~O' =>"<img src='Smiley/roll_1.gif'>",
  ':P' =>"<img src='Smiley/tongue_1.gif'>",
  '*--*' =>"<img src='Smiley/dead_1.gif'>",
  ':||:' =>"<img src='Smiley/starwars_1.gif'>",
  ':< >:' =>"<img src='Smiley/Argue_1.gif'>",
  '****'=>"*edit*",
  'ass'=>"*edit*",
  'damn'=>"*edit*",
  '****'=>"*edit*",
  '******'=>"*edit*",
  'pussy'=>"*edit*",
  'dick'=>"*edit*",
  '*****'=>"*edit*",
  'ballsack'=>"*edit*",
  'vagina'=>"*edit*",
  'piss'=>"*edit*"
 
 
  );
 
 
 
  $texttoreplace=str_ireplace(array_keys($smilies), array_values($smilies), $texttoreplace);
 
  return $texttoreplace;
 
 }
 
 ?>[/CODE]

@stargateanubis1authorOct 24.2008 — #sorry for....TRIPPLE posting...(i hate doing that)...

I have narrowed it down to 1 line not functioningn propperly in IE....

[CODE] document.getElementById("showchat").innerHTML=xmlHttp.responseText [/CODE]

i seem to be remembering that something in there needs to be changed for IE, but i dont remember what.... (i know that isn't working, because i put an alert inside that if result, and it "alerted" me propperly...now we just need to modify the contents of the DIV (showchat)

@toicontienOct 24.2008 — #What you are doing appears to be correct. Do you have two HTML tags with a name and Id the same?

&lt;div id="showcat"&gt;&lt;/div&gt;
 ...
 &lt;input name="showcat"&gt;

This will cause an error in Internet Explorer. It treats Ids and names the same, basically. Other than that, try alerting the xmlHttp.responseText variable.

@stargateanubis1authorOct 24.2008 — #no i dont (i've already dealt with some of those issues in the past ?)

what i HAVE found, is quite puzzling... i open the chat in firefox, it works fine. I open up the page in IE, it gets the chat data from the database, at that moment (on FIRST run).

Now, one thing that is important, is that this is set inside of an iframe. So the Page is actually a page with the chat inside the iframe.

Anyways, i open up the php file of which queries the database, in a new tab. I type in Firefox, and of course, the chat is not displayed In IE. I refresh the "game page", and nothing happens. I go over to the tab with the php file, refresh it, and the chat in the "game page" is updated correctly.

So from this experiment, it can be safely assumed that IE needs the php file to be refreshed in the browser to get the new data (and/or) the ajax is not opening/querying the php file correctly while in IE.

Thats all i've found out for now...

ANY ideas?

@weblizardOct 25.2008 — #IE has a funny cache bug with GET method

You have two options

1.Use POST method instead , which is slow somehow!

<i>
 </i>xmlHttp.open("POST",url,true)

2.Add a random string or time stamp to URL

<i>
 </i>var mytime= “ms=”+new Date().getTime();
 var url="maintest.php?"+mytime

Regards,

B.Mossavari

@stargateanubis1authorOct 25.2008 — #THANKS! that worked.

Everything is working now...and using up banwidth like never seen before (100 MB from 2 people's use in 12 hours time)

Also in #JavaScript _↴

Find specific text on page and click link next to it...?Dynamic Ajax Content For News Bar looped mouseover links

Success!

Help @stargateanubis1 spread the word by sharing this article on Twitter...

Tweet This

AJAX problem with IE

13 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

AJAX problem with IE

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴