AJAX and IE Problems, works fine in all others

[dc dalton]

I was just alerted to an IE bug in one of my apps that I really don't get. It works perfectly in Firefox, Opera and even Safari but for some reason IE (both version 6 and 7) are fouling up. It's happening in more than one block of code even though I will only show one here, makes me think something basic is wrong.

Here's one of the places it's fouling up:

	function inputArticle()	{
		alert("in input article");
		var url = "art_title=" + document.getElementById("art_title").value + "&art_body=" + document.getElementById("art_body").value + "&verification=" + document.getElementById("verification").value;
 
		http.onreadystatechange = handleArticleInput;
 
		http.open('POST', "/addarticle.php", true);
		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		http.setRequestHeader("Content-length", url.length);
		http.setRequestHeader("Connection", "close");
		http.send(url);
		}
 
	function handleArticleInput()	{
		alert("in handle article input");
		if (http.readyState == 4) {
			results = http.responseText;
			if (results == "bad_code")	{
				alert("You have inputted the wrong image verification code");
				}
			else if (results == "inputted")	{
				document.getElementById("tricky").style.display = "none";
				document.getElementById("message").style.display = "none";
				document.getElementById("subform").style.display = "none";
				document.getElementById("success").style.display = "block";
				}
			else	{
				alert("A database error has occured, please contact the webmaster");
				}
 
			}
 
		}

When the inputArticle function is called the first time it works fine BUT if the results come back from the server-side application as 'bad_code' and the customer then corrects it and tries to resubmit only the inputArticle function is called ..... the alert in handleArticleInput is never called.

Here's my basic Ajax object creation code that is used with the above code and my other AJAX functions:

function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
		xmlhttp = new XMLHttpRequest();
		} 
	catch (e) {
		xmlhttp = false;
		}
  }
  return xmlhttp;
}
var http = getHTTPObject();

As I said above, this code and the others that foul up in IE work perfectly in Firefox, Opera and Safari ... really perplexed about what's going on here!

Any help would be appreciated

[Raju Gautam]

Can we try creating http request object:

var http = getHTTPObject();

inside the inputArticle() function? Because when the form is re-submitted, the object will not be created again and the previously created object will be hanged up. Maybe IE did not find the previously created object.

I am not sure i found the solution but that might be the cause.

[dc dalton]

Can we try creating http request object:

var http = getHTTPObject();

inside the inputArticle() function? Because when the form is re-submitted, the object will not be created again and the previously created object will be hanged up. Maybe IE did not find the previously created object.

I am not sure i found the solution but that might be the cause.

I have never consider the idea of the object becoming 'stale' but first tests look like that may very well be the issue . I have more testing to do to confirm it and will let you know.

thanks

[dc dalton]

OK, I have confirmed it works with those changes in IE 6 and 7

BUT I have another question about ie7 .... I'm using the standalone version and none of my alerts seem to work. Is there something weird about them in ie7 or is it just the standalone version?

thanks again for the 'stale' object idea BTW ... don't think I would have thought of that.

[Sorccu]

The original code would probably work if you were to set the onreadystatechange handler after calling open(). See IEBlog : An XMLHTTPRequest tip.


Also, you need to apply encodeURIComponent() to the values. Otherwise ampersands etc. will break stuff.

[dc dalton]

The original code would probably work if you were to set the onreadystatechange handler after calling open(). See IEBlog : An XMLHTTPRequest tip.


Also, you need to apply encodeURIComponent() to the values. Otherwise ampersands etc. will break stuff.

Thanks for the link, that does work and is so much cleaner!