Javascript AJAX function not working in IE?

Question

I have this code:

function render_message(id)
{
var xmlHttp;
  xmlHttp=new XMLHttpRequest();  
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
     document.getElementById('message').innerHTML=xmlHttp.responseText;
     document.getElementById('message').style.display='';
     }
    }
    var url="include/javascript/message.php";
    url=url+"?q="+id;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
}

For some reason it does not work in IE and an error is being reported on this line "document.getElementById('message').innerHTML=xmlHttp.responseText;" with an "Unknown Runtime Error".

Can anyone help?

Edit: The code being added to the div is valid code ect.

Here is the response:

<div style="margin-left:auto;margin-right:auto;width:400px;">
    <img src="/forum/img/avatars/2.gif" width="90" height="89" style="float:left;">
    <div style="margin-left:100px;">
     <span style="font-size:16pt;">Sam152</a></span><br>
     <span style="font-size:10pt;text-transform:uppercase;font-weight:bold;">From Sam152</span><br>
     <span style="font-size:10pt;font-weight:bold;">Recieved April 17, 2009, 9:44 am</span><br>
     <br><br>

    </div>
</div>
<div style="margin-left:auto;margin-right:auto;width:400px;">
     asd</div>
<div style="margin-left:auto;margin-right:auto;width:400px;text-align:right;padding-top:10px;">
     <span onClick="requestPage('http://www.gametard.com/include/scripts/delete_message.php?id=14');document.getElementById('message14').style.display='none';document.getElementById('message').style.display='none';" class="button">Delete</span>
     <span onClick="document.getElementById('message').style.display='none';" class="button">Close</span>
     <span onClick="document.getElementById('to').value ='Sam152';document.getElementById('to').style.color ='#000';document.getElementById('newmessage').style.display='';" class="button">Reply</span>  

</div>

Answer 1

Your issue.

Essentially, you are trying to add HTML that doesn't make sense in the context you're adding it. Adding li's where there is no ul, or rows where there is no table can cause this sort of thing.

Answer 2

You can get this error if the result would be invalid HTML - for example <a><a>foo</a></a> or <a><p>foo</p></a>.

Without seeing more of the code (what type of element "message" is and what responseText is) it's hard to say more.

Your code isn't valid:

<span style="font-size:16pt;">Sam152</a></span>
                                    ^^^^

Answer 3

Not sure if the following applies to you as you don't mention what version of ie you are using.

works only in ie7 upwards

var xmlhttp=new XMLHttpRequest();

In Internet Explorer 5 and 6 you must use

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

Answer 4

Trust me on this: use an Ajax framework.

jQuery or prototype or any of the others.

Don't roll your own - you're only seeing the tip of the cross-browser iceberg with this issue.

If you must do it yourself check xmlHttp.status before getting your message. Bear in mind that IE sometimes returns Windows error codes instead of HTTP status here, and older FX throws an exception if the error is a lost connection rather than a HTTP status.

Oh, and IE6 is still about 30% of the web market and 60% of the corporate one, so @Paul Whelan's advice is worth checking too.