Ajax error "undefined" in IE

Question

Hello:

I am pretty new to Ajax. I'm trying to put some specific portions of an XML file into a div on my page, and the following works in every recent browser except IE:

var xhr = false;  
//Executed to request content from the server  
function setContent(){  
    if(window.XMLHttpRequest){  
        xhr = new XMLHttpRequest();  
    } else {  
        if(window.ActiveXObject){  
            xhr = new ActiveXObject("Microsoft.XMLHTTP");  
        }  
    }  
    xhr.onreadystatechange = showContent;  
    xhr.open("GET", "ajax/art.xml", true);  
    xhr.send(null);  
}  
//Executed to set the appropriate text once the server has gathered the data  
function showContent(){  
    if(xhr.readyState == 4){  
        if(xhr.status == 200 || window.location.href.indexOf("http") == -1){  
            var newData = xhr.responseXML.getElementsByTagName(curPage).textContent;  
        }  
        var textBox = document.getElementById("textBox");  
        textBox.innerHTML = newData;  
    }  
}  

(The value of curPage is set elsewhere in the code and seems to have the correct value) When I execute this code in IE on the server I get the word "undefined" in the textBox Div instead of the content grabbed from the XML document. How do I resolve this?

Thanks in advance <><

Answer 1

getElementsByTagName(curPage).textContent

shouldn't work in any browser. getElementsByTagName returns a list of elements, not a single element. A NodeList has no textContent property.

Anyway, IE doesn't support the DOM Level 3 Core property textContent. If you're sure there's exactly one text node inside the element, you can read its content using:

var el= xhr.responseXML.getElementsByTagName(curPage)[0];
var text= el.firstChild.data;

If the element might be empty you could check for that (el.firstChild!==null); if there's mixed text and element content you would need to write a text-extractor function that emulates textContent.

Answer 2

Switch your initial conditional to check for the MS specific object first and then check for XMLHTTPRequest.

Later versions of IE "support" XMLHttpRequest but it doesn't work. If you switch your conditional, your code should work.

function setContent(){   
    if(window.ActiveXObject){   
        xhr = new ActiveXObject("Microsoft.XMLHTTP");   
    } else {   
        if(window.XMLHttpRequest){   
            xhr = new XMLHttpRequest(); 
        }   
    }   
    xhr.onreadystatechange = showContent;   
    xhr.open("GET", "ajax/art.xml", true);   
    xhr.send(null);   
}  

Answer 3

Thanks bobince, but that doesn't seem to work either.

That's an interesting note about textContent. I tried:

if(xhr.responseXML.getElementsByTagName(allPages[curPage])[curStage].textContent != undefined){
    var newText = xhr.responseXML.getElementsByTagName(curPage)[curStage].textContent;
} else {
    var newText = xhr.responseXML.getElementsByTagName(curPage)[curStage].innerText
    }
}

since innerText should work in every browser except FF and textContent should work in every browser except IE, but I still get "undefined" in IE.

Furthermore, if I just use innerText and forget about FF compatibility, I get "undefined" in every browser, not only IE.

Not sure how to remedy this...

Here's the live site if that helps: www.tcmulder.com/art

(Oh, and notice I'm using (curPage)[curStage], fixes the first problem you noted)

Answer 4

I'm a little ashamed of having used innerHTML in the first place, but it's the only way I could get it to work in at least some browsers.

How do I go about using nodes instead of innerHTML? I've tried and tried, but cant get it to work. This is wrong, it doesn't show anything at all:

var newText = xhr.responseXML.getElementsByTagName(curPage)[curStage];
var newDiv = document.createElement("div");
newDiv.setAttribute("id","newDiv");
newDiv.appendChild(document.createTextNode(newText));
document.getElementById("textBox").replaceChild(newDiv);

It seems like I could solve my problem by using something like this instead of converting the XML to text and inserting it via innerHTML.

Answer 5

Thanks for your help; I've run out of time on this site so I had to go with jQuery after all.

function setContent(){   
$.ajax({
    type: "GET",
    url: "ajax/art.xml",
    dataType: "xml",
    success: function(xml){
        var curData = curPage + ":eq(" + [curStage] + ")";
        var theText = $(xml).find(curData).text();
        $("#textBox span").replaceWith("<span>" + theText + "</span>");
        ajaxReady = true;
    }
    });
}