AJAX Not working with IE6-IE8 Browsers

[lonestar23]

Have been trying to figure this one out for some time, but still can not get this AJAX script to work with Internet Explorer. It works with all other browsers. Thanks in Advance!

FORM CODE

<script language="JavaScript" type="text/javascript" src="aj.js">  
</script> 
<input type="text" value="#CCC" id="paints" size="7">
<input type="button" value="submit" id="gColor" onclick=  
"handleIT();colorIT()"> <input type="text" id="textBack">
<div class="c1" id="divBack">Dynamically Paint Here.</div>

aj.php CODE

<?php
$paint = trim($_POST['paints']);
echo trim($paint);
?>

aj.js AJAX POST CODE

function getXmlHttpRequestObject() { if (window.XMLHttpRequest) { return new XMLHttpRequest();} else if(window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP");} else {}}

var search7 = getXmlHttpRequestObject(); 

function handleIT() { if (search7.readyState == 4 || search7.readyState == 0) { 

var paints = escape(document.getElementById('paints').value); 
var parameters="paints="+paints;

search7.open("POST", 'aj.php', true); 
search7.onreadystatechange = colorIT; 

search7.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
search7.send(parameters);
}}

function colorIT() { if (search7.readyState == 4) { 
var paints = escape(document.getElementById('paints').value); 

document.getElementById("textBack").value=search7.responseText; 
document.getElementById("divBack").style.backgroundColor=search7.responseText;
}}

[essential]

Try the following format:

aj.js

var paints, parameters, search7, colorIT;

colorIT = function() { 
   if ( search7.readyState === 4 ) {
        document.getElementById("textBack").value = search7.responseText;
      document.getElementById("divBack").style.backgroundColor = search7.responseText;
   }
};

function getXmlHttpRequestObject() {
search7 = null;
paints = escape( document.getElementById("prints").value );
parameters = "paints=" + paints;
   if ( window.XMLHttpRequest ) {
         search7 = new XMLHttpRequest();
   } else if ( window.ActiveXObject ) {
      try {
          search7 = new ActiveXObject("Microsoft.XMLHTTP");
      } catch( e ) {
          search7 = new ActiveXObject("Msxml2.XMLHTTP");
      }
   }
   if ( search7 !== null ) {
search7 = ( search7.overrideMimeType ) ? search7.overrideMimeType("text/xml") : search7;
search7 = ( search7.setRequestHeader ) ? search7.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") : search7;
      search7.onreadystatechange = colorIT;
      search7.open("POST", "aj.ph", true);
      search7.send( parameters );
   } else {
      alert("\nYour browser does not support AJAX Request!"); 
   }
}

Let me know, if you're still getting the same issue...

[lonestar23]

The code I originally posted works in function but according to the Internet Explorer Team they found.

===== IE Team Response =====
From an analysis of the IE folks, it seems that the problem is generated by some whitespace in your string

00380023 00380038 0000000a

This fails:
document.getElementById("divBack").style.backgroundColor=search7.responseText;
Error is Invalid property value.

[essential]

Just disregard my post, if your code is working...

[lonestar23]

The code does not work, because of some weird whitespace being passed that is what microsoft said. YOu can see the code in function at the below url. It works with all browsers except Internet Explorer.

http://89.233.173.91/bug/

The sample is running the code originally posted on this thread.

[essential]

Try not to escape the string being passed by the paints object, and see how things will work...

[lonestar23]

you can see the original code behavior at the following http://89.233.173.91/bug/ It works with any browser except IE. Have tried not escaping and get the same error....

[essential]

Would you prefer using a different method?

How about a function that will filter a user input, then set it as direct style of the object?
Example:

if ( document.all ) {
    div = document.all.divBack;
    div.setAttribute("style", "background-color : " + search7.responseText + ";");
   }

Im sure there's a way to defeat the bug...
Just try to play some experiment in your function's.