Ajax script not working w/ IE7+

Question

KlNTARO 0 Newbie Poster

17 Years Ago

Greetings. I'm stumped with a particular problem involving an ajax script that works for Firefox, Opera, Safari, and Chrome... but unfortunately does not work with any version of IE (*actually I haven't tested IE6 or less yet, but who cares about those anymore*).

On the HTML side, a list of hospitals is generated, and when a hospital is selected, the content changes, based on the selection. In addition, the script also runs 'onload' to generate the initial list. The script is below, and the incomplete example can be seen at

function narrowSelection(){
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null){alert("Browser does not support HTTP Request");return;}
var url="scripts/multiscript.php?narrowSelection="+document.getElementById('keyword').value;
xmlhttp.onreadystatechange=stateChangedA;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);}

function stateChangedA(){
if (xmlhttp.readyState==4){document.getElementById("hospitallist").innerHTML=xmlhttp.responseText;}}

function GetXmlHttpObject(){
if (window.XMLHttpRequest){/* code for IE7+, Firefox, Chrome, Opera, Safari */
return new XMLHttpRequest();}
if (window.ActiveXObject){/*code for IE6, IE5*/
return new ActiveXObject("Microsoft.XMLHTTP");}return null;}

Thanks in advance for any assistance!

ajax javascript

3 Contributors
6 Replies
184 Views
2 Days Discussion Span
Latest Post 17 Years Ago Latest Post by farhan386

Dani AI

Generated 6 Months Ago

A short diagnosis and a compact, more robust pattern to try next.

Common causes when an AJAX call works in WebKit/Gecko but fails in IE7+: aggressive GET caching in IE, accidental encoding of the whole URL (which mangles slashes and query separators), calling the request before the DOM element exists, reusing a global XHR object across requests, and innerHTML quirks when inserting certain kinds of markup. In this thread ’s edit appears to have encoded the entire URL (that will break requests); ’s jQuery suggestion is valid if abstraction is preferred.

A minimal, IE-friendly pattern (local XHR, encode only the parameter, add a cache-buster, check status):

/* local XHR, encode only the param and add cache-buster */
function narrowSelection() {
  var field = document.getElementById('keyword');
  if (!field) return;
  var param = encodeURIComponent(field.value || '');
  var url = 'scripts/multiscript.php?narrowSelection=' + param + '&_=' + (new Date()).getTime();
  var xhr = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState !== 4) return;
    if (xhr.status === 200 || (xhr.status === 0 && location.protocol === 'file:')) {
      var out = document.getElementById('hospitallist');
      if (out) out.innerHTML = xhr.responseText;
    } else {
      /* handle/report non-200 status as needed */
    }
  };
  xhr.send(null);
}

Final checks and tips: confirm the script path is correct (watch for typos like "script" vs "scripts"), inspect the request/response with Fiddler or the browser/network tools to see the actual HTTP status and headers, set server headers to prevent caching if needed, and avoid inserting table rows or <option> tags into the wrong parent with innerHTML (use DOM methods to populate a <select>). If a library is acceptable, jQuery’s $.ajax with cache:false handles most of these edge cases with less code.

All 6 Replies

essential 84 Posting Shark

17 Years Ago

Hi kintaro,

try this code:

<script type="text/javascript">
// <![CDATA[
var d = document;
var GetXmlHttpObject = 0;
if ( d.getElementById ) {
( GetXmlHttpObject = function( ) {
  var req = 0;
  if ( req = new XMLHttpRequest() ) {
     return req;
  } try { 
      var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
      var cLen = client.length; 
      for( var x = 0; x < cLen; x++ ) {
         if( req = new ActiveXObject( client[ x ] )) {
            return req;
         }
      }
   } catch( e ) { 
     alert( "Browser does not support HTTP Request." );
     return 0;
   }
} ); var stateChangedA = function() {
   d.getElementById("hospitallist").innerHTML = ( function( xhr ) {
   if(( { 4 : 4, complete : 4 }[ xhr.readyState ] )) 
      return xhr.responseText;
   else
      return "HTTP Request failed!";
   } )( this );
}

var narrowSelection = function() { 
   var xmlHttp = GetXmlHttpObject(); 
   if ( xmlHttp ) {
      var url = "./script/multiscript.php?narrowSelection=" + d.getElementById("keyword").value; 
      (( "overrideMimeType" in xmlHttp ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
      xmlHttp.onreadystatechange = stateChangedA;
   xmlHttp.open( "GET", encodeURIComponent( url ), true );
   xmlHttp.send( null );
   return;
   } void( 0 ); 
}; window.onload = narrowSelection;
}

// ]]>
</script>

essential 84 Posting Shark

17 Years Ago

Hi,

this should be able to work under rough condition:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>www.daniweb.com</title>
<script type="text/javascript">
// <![CDATA[

var GetXmlHttpObject = function() {
var xml = 0;
   try {
      if ( "XMLHttpRequest" in window ) {
         xml = new XMLHttpRequest();
      } else if ( "ActiveXObject" in window ) {
      var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
         try {
            for ( var x = 0; x < client.length; x++ ) {
               if ( new ActiveXObject( client[ x ] )) {
                  xml = new ActiveXObject( client[ x ] );
                  break;
               }
            }
         } catch( e1 ) { xml = 0; 
         }
      }
   } catch( e ) {
      if ( "createRequest" in window ) {
         xml = window.createRequest();
      } 
   } return xml;
};

var narrowSelection = function() {
   var xmlHttp = GetXmlHttpObject();
   if ( xmlHttp ) {
      var keywords = document.getElementById( "keyword" ) || keyword;
      var url = "script/multiscript.php?narrowSelection=" + encodeURIComponent( keywords.value );
   (( "overrideMimeType" in xmlHttp ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   xmlHttp.onreadystatechange = function() { 
   var hospital = document.getElementById( "hospitallist" ) || hospitallist; 
   if ( { 4 : 4, complete : 4 }[ this.readyState ] && ( { 0 : "offline", 200 : "online" }[ this.status ] )) {

      hospital.innerHTML = this.responseText;

   } 
};
   xmlHttp.open( "GET", url, true );
   xmlHttp.send( null );
   return;
   } alert( "Your Browser does not support HTTP Request!" );
};
// ]]>
</script>
</head>
<body>
<noscript>
<p>This site requires a browser that support <b>JavaScript</b>. </p> 
</noscript>
<div>
<div style="margin-bottom : 1em;" id="hospitallist"></div>
Enter Keyword: <input type="text" id="keyword" name="keyword" value="" size="30" onchange="narrowSelection()" />
</div>
</body>
</html>

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.

KlNTARO 0 Newbie Poster · Answer 1 · 2009-08-23T22:55:54+00:00

I will give that a try. I may have to tweak it a bit for the server-side.

KlNTARO 0 Newbie Poster · Answer 2 · 2009-08-24T01:53:17+00:00

No good :-( It also stopped working for the other browsers, too. Thanks for trying, though!

KlNTARO 0 Newbie Poster · Answer 3 · 2009-08-24T02:10:32+00:00

I think I need to also mention that this server language is php, not asp.

farhan386 0 Light Poster · Answer 4 · 2009-08-26T10:39:57+00:00

You may want to user javascript library such jQuery. jQuery is able to make ajax call, or many more javascript stuff for all major browser with a single code. Write less, do more :)

Ajax script not working w/ IE7+

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers