Simple AJAX Not Working on IE6-IE8

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

== index.html ==

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

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

==aj.js ==

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;
}}

[daveVk]

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

Assume this test is to prevent new request while prior request still pending.

Is readyState defined prior to search7.open ? , and if state is 4 prior data may not have been actioned ?

Safer to use explicit busy flag.

[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.

[daveVk]

Wow a response for IE !

If you take the failing line out, what do you see in "textBack" in IE and other browsers ?

[lonestar23]

Text boxes work fine, but anything being passed to a <div> fails. A working sample of the code is here. <snipped url>

Works with all browsers except any IE version

[edited by: whoisgregg at 4:06 pm (utc) on May 4, 2009]
[edit reason] Whoops, no URLs please. See forum charter & Stickymail. [/edit]

[daveVk]

There is an odd character at the end of search7.responseText search7.responseText.length is 5 not 4 as expected. Possibly newline at end of PHP ?

[lonestar23]

you will notice if you type in any color: yellow, #AB1616, #000000 .... there is always an error...

[daveVk]

Exactly there is a newline character, decimal 10, LF, at the end of responseText. probably coming from here

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

the dump

00380023 00380038 0000000a

38 Hex is "8"
23 Hex is "#"
0a Hex is [LF]

is probably #888[LF]

[lonestar23]

Yeah, that makes sense... but how would I go about fixing that?

[daveVk]

There are number of things you could do

- remove newline from php with text editor

- remove the ?> line completely

- change this
document.getElementById("textBack").value=search7.responseText;
document.getElementById("divBack").style.backgroundColor=search7.responseText;

to
var str = search7.responseText.split(/\s/g)[0]; // get first word
document.getElementById("textBack").value=str;
document.getElementById("divBack").style.backgroundColor=str;

That should solve the issue, but there should be more checks, for example entries like "hot pink" will still bomb.

[lonestar23]

The code you provided to replace the original code works perfectly! Thanks alot for following up! Cheers!