Reputation: 1891
I am trying to create a dynamic menu by reading an XML file using jQuery. I have developed the code, and it works fine in Firefox 3 and Chrome, however it just doesn't work for Internet Explorer 7/8.
I'm posting my code below. What is the matter with it?
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>
Upvotes: 0
Views: 1677
Reputation: 461
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);} });
Upvotes: 0
Reputation: 2061
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.
Upvotes: 1
Reputation: 83709
Could you try:
$("#LeftMenu").append($(menu));
it's just a thought though.
Upvotes: 0