CodingForums.com - Why is IE dumb (innerHTML = xmlReq.responseText generates error)

CodingForums.com (http://www.codingforums.com/index.php)

- Ajax and Design (http://www.codingforums.com/forumdisplay.php?f=55)

- - Why is IE dumb (innerHTML = xmlReq.responseText generates error) (http://www.codingforums.com/showthread.php?t=142844)

Why is IE dumb (innerHTML = xmlReq.responseText generates error)

if I have code like

Code:

function handler(){

    if (xmlReq.readyState == 4){

        document.getElementById("DivEl").innerHTML = xmlReq.responseText;

    }

}

where handler is the handler for xmlReq.onreadystatechange.

Why does IE generate an error ("Unknown runtime error") at the line where responseText is assigned to innerHTML???

Firefox works fine.

I thought maybe it was because there was already a <doctype> in the page and also in the response page. But even after taking them both out, no change.

It doesn't work in IE6, and I don't have 7 cause it's on a different computer now, so I haven't tried on 7.

Strangely enough it allows "innerText = responseText;" to work.
Could this be one of IE's lame attempts to be secure? idk.

Also if you alert(responseText), it alerts the text that is supposed to respond! Why can't it just put the text in the stupid box! I don't see what is preventing the text (that is there) from going in the stupid div!

Please excuse my madness, IE bugs me.

Please tell me why IE does not allow this, and maybe a solution to it.

Thanks,
Harry :D

Without seeing all of the code or how you are calling this. Is the page fully rendered / onload has already fired? Is this div you are putting the text into hardcoded n the page or is it dynamic.

Eric

as stated, it's difficult without more code, but should your handler not be receiving xmlReq as it's argument?

the ajax works fine, it's just when...

document.getElementById("div").innerHTML = xmlReq.responseText;

creates an error.

if you do innerText, it works fine too, just innerHTML is the problem. Yes it (the div) is hard-coded.

What could be the only reasons innerHTML being set to responseText causes an error. This is only in IE.

Everything is rendered. It is just the ajax code, nothing else on the page.
If you really want to see it...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

</head>

<body>





URL: <input type="text" id="url" /> <input type="button" value="Go" onclick="callback(document.getElementById('url').value)" />



<br/>



<div id="ajaxUpdate">

</div>



<script>

function getAjax(){

    var request = false;

    if (window.XMLHttpRequest) {

        request = new XMLHttpRequest();

    } 

    else if (window.ActiveXObject) {

        try {

            request = new ActiveXObject("MSXML2.XMLHTTP");

        } 

        catch (e1) {

            try {

                request = new ActiveXObject("Microsoft.XMLHTTP");

            } 

            catch (e2) {

                //Failed to get XMLHttpRequest.

            }

        }

    }

    

    return request;

}  



var request;

var begin;

var time;

var response = "";

function callback(url){

    request = getAjax();

    request.open("GET", url, true); // true async

    request.onreadystatechange = handler;

        begin = (new Date()).getTime();

    request.send(null);

}

function handler(){

    var panel = document.getElementById("ajaxUpdate");

    

    switch(request.readyState){

    case 0:

        panel.innerHTML = "Uninitialized!";

        break;

    case 1:

        panel.innerHTML = "Open";

        break;

    case 2:

        panel.innerHTML = "Sent";

        break;

    case 3:

        panel.innerHTML = "Receiving";

        break;

    case 4:

        time = ( (new Date()).getTime() - begin) / 1000;

        panel.innerHTML = "Status: " + request.status + " (" + request.statusText + ")";

        panel.innerHTML += "<br/>Time: " + time.toFixed(3) + " (sec)";

        panel.innerHTML += "<br/>Response Headers: <br/>" + request.getAllResponseHeaders();

        

        panel.innerHTML += "<br/><br/>" + request.responseText;

        request = null;

        break;

    }

}

</script>



</body>

</html>

If I run it locally (C:\file.html) versus on VS localhost, it works fine. Then if I put it on the localhost and do ajax for something like "localhost/website/text.txt" I get the original error at "innerHTML = responseText" line. If I go to same location in a browser, it works fine, I get the text file. xmlReq.responseText just won't work with localhost.

So I guess this was a bit different problem than I originally was implying. Sorry.

i included this line in my php script before sending the response back to the browser.

header('Content-type: text/html; charset=UTF-8');

worked for me.

PS - I friggin hate IE... with a passion.

You also shouldn't have your script in your <body> like that.