AJAX won't work with IE, but works with Firefox and Safari

Question

Diode 0 Junior Poster in Training

18 Years Ago

I don't know what happened to my previous topic about this.

But I am using an AJAX menu on a page I am making for somebody, and I used the exact same code w3schools recommends to use:

function updatemenu(leagueno, confno, location, mode)
  {

    xmlHttp=GetXmlHttpObject();

    if (xmlHttp==null)
      {
        alert ("Your browser does not support AJAX!");
        return;
      } 

    var url="updatemenu.php";
    url=url+"?mode="+mode+"&leagueno="+leagueno+"&confno="+confno+"&loc="+location;
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
  } 

function stateChanged() 
  { 
    if (xmlHttp.readyState==4)
      { 
        document.getElementById("results").innerHTML=xmlHttp.responseText;
      }
  }

function GetXmlHttpObject()
  {
    var xmlHttp=null;

    try
      {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
      }

    catch (e)
      {
        // Internet Explorer

        try
          {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
          }

        catch (e)
          {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
      }

    return xmlHttp;
  }

It works flawlessly in Firefox, Safari, etc., (any browser that adheres to standards), but Internet Explorer doesn't load it, and it gives an error. And in fact, it says the error is on line 169, but the page isn't that many lines long, so I can't find where it is. I'm sure it's on statechanged or one of the xmlHttp=new ActiveXObject lines.

But this is the code w3schools says to use, so I don't know why it's not working.

Any ideas?
Thanks

ajax javascript

2 Contributors
4 Replies
190 Views
1 Day Discussion Span
Latest Post 18 Years Ago Latest Post by Member #380484

Dani AI

Generated 6 Months Ago

A few focused troubleshooting notes and a simple alternative pattern that often fixes IE-only failures (especially in older, quirky builds like IE for Mac).

reported an IE-only error with an out-of-range line number; those symptoms usually point to one of these: an old/unsupported IE implementation, a handler referencing the wrong XHR object (scope/binding), aggressive GET caching, or an HTML/templating layer changing characters (for example & becoming & in the final JS). was on the right track isolating the handler binding; the next steps are about isolating and ruling out environmental issues.

Do this to isolate the problem:

Run a minimal test page (no extra scripts or server includes) that requests a tiny static text file so you can see whether IE gets a response at all.
Test on a Windows IE build (Mac IE 5.2 is very old and unsupported); if you cannot, use a clean virtual/test environment.
Enable script debugging in IE (so you get real error info) and temporarily simplify the page by moving scripts into an external file — that helps IE report accurate line numbers.
Check security/ActiveX/script settings in IE if XMLHTTP ActiveX needs to run.

If the bug is handler/scoping or caching, this pattern reliably avoids both problems and adds a cache-buster and status check:

var xhr = new XMLHttpRequest();
xhr.open('GET', url + '&_=' + (new Date()).getTime(), true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      document.getElementById('results').innerHTML = xhr.responseText;
    } else {
      alert('Server returned ' + xhr.status);
    }
  }
};
xhr.send();

Additional notes: avoid naming parameters location (it shadows window.location in some environments), confirm the server returns a 200 and correct Content-Type, and ensure your templating does not double-escape &. If the minimal test works on Windows IE but not on the Mac build, the culprit is almost certainly the obsolete Mac IE implementation rather than your AJAX logic.

All 4 Replies

Member #380484

18 Years Ago

Sorry, it works in my IE7 and I don't have any of the legacy IE versions around to test it on.

This is what I have from your code above, after some mild reformatting clean up (to my tastes) :-)

w3c_ajax.php

<?php
if ( $_REQUEST ) {
  print 'test response';
  exit;
}
?>
<!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=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function updatemenu( leagueno, confno, location, mode ) {

  var xmlHttp = GetXmlHttpObject();

  if ( xmlHttp == null ) {
      alert ( "Your browser does not support AJAX!" );
      return;
  } 

  var url="w3c_ajax.php";
  url = url + "?mode=" + mode + "&leagueno=" + leagueno + "&confno=" + confno + "&loc=" + location;
  xmlHttp.onreadystatechange = stateChanged;
  xmlHttp.open( "GET", url, true );
  xmlHttp.send( null );
} 

function stateChanged () { 
  if ( this.readyState == 4 ) {
    if ( this.status == 200 ) {
      alert( this.responseText );
      document.getElementById("results").innerHTML = this.responseText;
    } else {
      alert( 'The server failed to process your request' );
    }
  }
}

function GetXmlHttpObject () {
  var xmlHttp = null;
  try {
    // Firefox, Opera 8.0+, Safari
     xmlHttp = new XMLHttpRequest();
  } catch (e) {
    // Internet Explorer
    try {
       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  return xmlHttp;
}
</script>
</head>
<body>
  <div id="results"></div>
  <a href="javascript:" onclick="updatemenu()">Update Menu Test</a>
</body>
</html>

But I didn't really change anything except make xmlHttp local to the function and then use the this keyword in the stateChanged method -- give it a try and see if it works in yours now? If not, what IE version are you using?

...

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Diode 0 Junior Poster in Training · Answer 1 · 2008-09-02T22:48:57+00:00

It's also worth adding, I searched the topic list for topic relating to this problem, but none of the advice offered solved my problem.

Thanks.

Diode 0 Junior Poster in Training · Answer 2 · 2008-09-03T20:33:00+00:00

IE 5.2 for Mac. I don't have a Windows installation in the house. So I have to use it for Mac, which may be kind of old.

But your example displayed 'text response', so I take it that means it worked, right?

I'll have to view it on his laptop then and see if it works, but I have before, and it always said "Error on such and such line" but it was always a much higher number than the actual number of lines in the php file. And I haven't changed anything since the original copy and paste from w3c's site. But I'll have to check it again.

Thanks for your reply.

Member #380484 · Answer 3 · 2008-09-03T20:58:50+00:00

IE 5.2 for Mac. I don't have a Windows installation in the house. So I have to use it for Mac, which may be kind of old.

Wow, when I build websites I just ignore IE for Mac since it's so poorly designed (and no longer supported) it's just not worth the trouble. But hey, if it works in that browser it's bound to work most everywhere else too. :-)

Cheers

AJAX won't work with IE, but works with Firefox and Safari

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers