Getting HTMLUnknownElement with jQuery.find() and an XML Document

Question

I'm attempting to load up an XML document (specifically an RSS feed) via an Ajax request, parse it, and insert some information based on said feed into my page. The code works fine in Firefox, Opera, Chrome, and Safari, but not IE7. Go figure.

After doing some initial debugging, I've found that the XML string is being retrieved via the request, and the specific node type I'm getting when trying to parse nodes out of the document is HTMLUnknownElement.

Here's the relevant code:

$.get('feed.php', function(oXmlDoc) {

    var titles = $(oXmlDoc).find('title');
    var dates = $(oXmlDoc).find('pubDate');

    for(var i = 0; i < 5; i++) {
        parseNodes(titles[i].firstChild.nodeValue, dates[i].firstChild.nodeValue));
    }

});

The parseNodes function is never actually being hit because IE cannot access firstChild and, consequently, nodeValue.

Thanks in advance for any ideas and/or suggestions on how to address this.

Answer 1

EDIT

After your comment I looked a little closer at your code. Find, unlike selectors, returns a jQuery object, but you want the actual DOM objects. Try using get() to retrieve an array of elements from the jQuery. You may also need to use childNodes[] as well.

$.get('feed.php', function(oXmlDoc) {

    var titles = $(oXmlDoc).find('title').get();
    var dates = $(oXmlDoc).find('pubDate').get();

    for(var i = 0; i < 5; i++) {
        parseNodes(titles[i].childNodes[0].nodeValue,
                   dates[i].childNodes[0].nodeValue));
    }

});

Answer 2

I was able to fix this, but it required a little bit of IE-specific code in order to get it working problem. Essentially, here's how I ended up having to fix the problem.

First, I verified that my server-side code was returning the proper content type:

header('Content-Type: application/rss+xml');

After that, I performed a check to see which browser was currently accessing the page:

if($.browser.msie) {
    // ie-specific code (see below)
} else {
    // code as posted in the question
}

In order to have more control over the ajax request, I opted to go with jQuery's $.ajax function rather than the $.get function.

var oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
$.ajax({
    url: "feed.php",
    processData: false,
    data: oXmlDoc,
    success: function(sXml) {
        oXmlDoc.loadXML(sXml) 
        var titles = $('title', oXmlDoc);
        var dates = $('date', oXmlDoc);
        for(var i = 0; i < 5; i++) {
            parseNodes(titles[i].childNodes[0].nodeValue, dates[i].childNodes[0].nodeValue));
        }
     }
});

Anyway, it's not as elegant as I would like but it gets the job done.

Answer 3

THIS WORKED FOR ME USING GET

$.get("url.php", { mode: "r"}, function(data){

             //FIX FOR UNKNOWNHTML OBJECT RETURNED IN IE

             if(navigator.appName.indexOf("Microsoft")>=0) {
                var xData = new ActiveXObject("Microsoft.XMLDOM");
                xData.loadXML(data); 
             } else {
                var xData = $(data)
             }
             $(xData).find("room").each(function() {
                    alert($(this).find("name:first").text());

             });

});