I have an xml as like below
above is an example of my xml file. Now my requirement is to read the xml file and build a menu using jquery.
can some one please help me
-
we have already done it using asp.net, we are reading the xml file using C# and later binding it with asp:menu control. now we are supposed to implement it with mvc. so, we want to create a menu using jquery by reading the above xmlsuman– suman2012-09-07 07:11:07 +00:00Commented Sep 7, 2012 at 7:11
-
Post your xml file's code (not the image) and other codes that you have tried .The Alpha– The Alpha2012-09-07 07:15:08 +00:00Commented Sep 7, 2012 at 7:15
-
This sound like: write the code for me. And somebody actually did it, you're lucky...themarcuz– themarcuz2012-09-07 08:16:32 +00:00Commented Sep 7, 2012 at 8:16
Add a comment
|
1 Answer
You can try this
XML
<?xml version="1.0" encoding="utf-8" ?>
<MenuRoot>
<Menu id="home" text="Home" url="home.aspx"></Menu>
<Menu id="projects" text="Projects" url="projects.aspx">
<SubMenu id="sub1" text="Sub One" url="subone.aspx"></SubMenu>
<SubMenu id="sub2" text="Sub Two" url="subtwo.aspx"></SubMenu>
</Menu>
</MenuRoot>
HTML
<div id="menu_wrapper"></div>
JS
$(document).ready(function(){
$.ajax({
type: "GET",
url: "jquery_xml.xml",
dataType: "xml",
success: function(xml){
var ul_main=$("<ul />");
$(xml).find("Menu").each(function(){
if($(this).children().length)
{
var ulSub=$("<ul />");
$(this).children().each(function(){
ulSub.append("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
});
var li=$("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
ul_main.append(li.append(ulSub))
}
else ul_main.append("<li id="+$(this).attr("id")+"><a href="+$(this).attr("url")+">"+$(this).attr("text")+"</a></li>");
});
$("#menu_wrapper").append(ul_main);
}
});
});
Output
You just need to style your menu using css.
