How to query XML elements from a local XML file in Internet Explorer using jQuery?

Question

I am building a single HTML page for use in a touch-screen kiosk. I have an external XML file named data.xml which resides in the same directory as my HTML page. I was able to use jQuery to load the external XML file, parse it and build some HTML dynamically on page load without any problems in Firefox and Chrome. But then I tried it in Internet Explorer...

The XML document loads just fine using the $.ajax() function. I did an alert(xmlDoc.text()) and it showed all the text contents of the XML document. So that is not the problem.

I did some searching and found a StackOverflow answer which gives a solution to the problem IF you're serving the XML from a web server. It basically states that the following HTTP HEADER is needed in order for Internet Explorer to treat the xml string as xml.

content-type:application/xml;charset=utf-8

This HTML page needs to just run as a standalone page inside Internet Explorer. We will not have a web server running on the kiosk machine.

My question is whether there is any way to specify the correct content-type when loading a local resource in jQuery?

Here's the relevant ajax code I am working with...

$.ajax({
  url: 'data.xml',
  async : false,
  success : function(response) {
    xml = $(response);
  }
});

// Following line works in Firefox/Chrome, but not in Internet Explorer
var firstItemText = $("item:first", xml).text();

EDIT: I have added an error handling function on the ajax request like so...

$.ajax({
  url: 'data.xml',
  async : false,
  dataType : "xml",
  success : function(response) {
    xml = $(response);
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    alert('Data Could Not Be Loaded - '+ textStatus);
  }
});

This function is firing in Internet Explorer and the resulting message is:

Data Could Not Be Loaded: - parsererror

I checked my XML document with several online XML validator tools and it has no errors.

Any help is appreciated.

Answer 1

Try to change your content type to:

content-type:text/xml;charset=utf-8

And dont forget to add this line in your XML file (must be the first line)

<?xml version="1.0" encoding="utf-8"?>

Answer 2

After some testing I managed to make it work.

The problem is when you are loading XML files locally, the data received by Internet Explorer is plain-text, not text/xml.

The solution is:

$.ajax({
    url: 'data.xml',
async : false,
dataType: ($.browser.msie) ? "text" : "xml",
success : function(response) 
{
    if (typeof response == "string") 
    {
        xml = new ActiveXObject("Microsoft.XMLDOM");
    xml.async = false;
    xml.loadXML(response);
    } 
    else 
        xml = $(response);
    },

error: function(XMLHttpRequest, textStatus, errorThrown) 
    {
    alert('Data Could Not Be Loaded - '+ textStatus);
}
});

var firstItemText = $("item:first", xml).text();

You can see the full explanation in this link:

http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests

I'm glad if I helped.