jQuery, XML as a String, and IE

Question

Hello everyone,

I just inherited a project where the main navigation menu is currently Flash. They asked if I could switch it to javascript, so I agreed to give it a shot. The navigation structure itself is dynamically generated on the server and new nodes are picked via an ajax call. The return is all XML.

To prevent delays on initial load, the server sends down the xml from a first call for the current page into a textarea.

Firefox and Chrome can pull that xml and manipulate it in jQuery just fine. IE, however, chokes out. I know that IE doesn't play well if the MIME type isn't set, but as the server is essentially off limits, I need to find a way around this.

An example of the xml stored in the textarea would be something like:

<nav> <item name='Link 1' url='http://www.somesite.com' img='/path/to/image.png' /> <item name='Link 2' url='http://www.somesite.com' img='/path/to/image.png' /> </nav>

I am grabbing the contents using the .val() method, which works in everything other than IE. I have banged my head for awhile on this. Any help?

Answer 1

I don't know that using Javascript is a good idea in order to implement this. If anything, I would implement this as a series of nested UL/LI elements (with links inside the LI elements) and then use a third-party library like jQuery to generate the menu for you (there are a number of plugins which will create menus for you based on this structure (or a similar hierarchical structure).

This leads to better searchability on your site, since search engines won't process the ajax call to get the content, and this way, your links are embedded in the page.

Also, it requires less code on your part, since most libraries like jQuery correctly abstract out the differences in browsers when offering their functionality.

Answer 2

A suggestion would be to make sure you set the content type in your ajax call to "xml".

datatype: "xml"

IE need this to be specifically spelled out.

I would also suggestion using json instead of XML due to the size overhead of XML. If this is an option for you I would seriously consider it. Json is very easy to work with and is extremely fast for ajax calls.

Answer 3

This issue has been resolved here

<script type="text/javascript">

$(parseXml($("#xml").val())).find('item').each(function(){
 ...

});

function parseXml(xml)
{
    if (jQuery.browser.msie)
    {
        var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.loadXML(xml);
        xml = xmlDoc;
    }
    return xml;
}

</script>