JQuery not working in IE

Question

I am trying to create a dynamic menu by reading an xml file using jQuery. I have developed the code and its been working fine in FF3 and Chrome, however it just doesn't work for IE7/8.

Im posting my code below, can some one please have a look and help me with this ?

   var menu ="";    
$(document).ready(function()
{
    $.ajax({
        type: "GET",
        url: "menu.xml",
        dataType: "xml",
        success: parseXml
    });
});

function parseXml(xml)
{
    $(xml).find('link').each(function(x){
        var link = $(this); 
        var title = link.attr("name");

        menu += "<div class='AccordionPanel AccordionPanelClosed'>";
        menu += "<div class='AccordionPanelTab'><span></span>";
        menu += "<a href='javascript:;'>"+title+"</a></div>";

        link.find("inLink").each(function(z){

            var intitle = $(this).attr("name");

            menu += "<div class='AccordionPanelContent'>";
            menu += "<ul><li>";
            menu += "<a href='"+$(this).attr("ref")+"'>"+intitle+"</a>";
            menu += "</li></ul></div>";
        });

        menu += "</div>";   

    }); 

    $("#LeftMenu").append(menu);          

}

The xml file has the following structure

<links>
  <link name="Reception" ref="index.html">
   <inLink name="Registration" ref="registration.html"/>
   <inLink name="Inquiry" ref="#"/>
  </link>
  <link name="Records" ref="#">
   <inLink name="Records" ref="#"/>
   <inLink name="Records2" ref="#"/>
      </link>
    </links>

Thanks for the help

Answer 1

Could you try:

 $("#LeftMenu").append($(menu));

it's just a thought though.

Answer 2

I had a similar problem parsing an XML AJAX return, it worked fine on FF, but failed on IE.

The problem I had was extra nodes between the nodes that you are expecting. IE adds text nodes with whitespace to the XML DOM where there is whitespace in the XML file.

I fixed it by changing the generated XML so there was no whitespace between nodes.

Answer 3

I could be wrong, but try this for your ajax request instead.

$.ajax({ type: "GET", url: "menu.xml", dataType: "xml", success: function(xml){parseXml(xml);} });