Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 8804

Apr 30th, 2009

AJAX Not working with IE6-IE8 Browsers

Expand Post »

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<?php
$paint = trim($_POST['paints']);
echo trim($paint);
?>
<?php
$paint = trim($_POST['paints']);
echo trim($paint);
?>

aj.js AJAX POST CODE

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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;
}}
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;
}}

lonestar23

Reputation Points: 20

Solved Threads: 0

Light Poster

Offline

43 posts
since Mar 2008

Permalink

Apr 30th, 2009

Re: AJAX Not working with IE6-IE8 Browsers

Try the following format:

aj.js

javascript Syntax (Toggle Plain Text)
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!"); 
   }
}
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...

Last edited by essential; Apr 30th, 2009 at 11:00 pm.

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

May 1st, 2009

Re: AJAX Not working with IE6-IE8 Browsers

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.

lonestar23

Reputation Points: 20

Solved Threads: 0

Light Poster

Offline

43 posts
since Mar 2008

Permalink

May 1st, 2009

Re: AJAX Not working with IE6-IE8 Browsers

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

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

May 1st, 2009

Re: AJAX Not working with IE6-IE8 Browsers

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.

lonestar23

Reputation Points: 20

Solved Threads: 0

Light Poster

Offline

43 posts
since Mar 2008

Permalink

May 1st, 2009

Re: AJAX Not working with IE6-IE8 Browsers

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

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

Permalink

May 1st, 2009

Re: AJAX Not working with IE6-IE8 Browsers

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

lonestar23

Reputation Points: 20

Solved Threads: 0

Light Poster

Offline

43 posts
since Mar 2008

Permalink

May 1st, 2009

Re: AJAX Not working with IE6-IE8 Browsers

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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
if ( document.all ) {
    div = document.all.divBack;
    div.setAttribute("style", "background-color : " + search7.responseText + ";");
   }
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.

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: can't call this function...

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Swapping data from textbox1 to textbox2 & textbox2 to textbox1 in 1 onclick event

DaniWeb Message

Cancel Changes

User Name
Password