Hi Folks,
I have an xml file which i want to convert to an unordered list using jquery. so far I managed to get the list working, except for the third level of the xml. Currently my code writes all child items of 'Navigation_sub_3'. What I'm trying to figure out is how to write only the child nodes that are in level_2, so the output would be
Strategy
Views
IBM
etc.
UML
Development
Architecure
etc
Platform
Model
BPEL
OSLO
etc
Service
Google
Live
etc.
Below is my html/jquery file and the xml. Can anyone help me out how to display the 3rd level?
Cheers Chris
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function XmlOnLoad(xmlData, strStatus)
{
var jData = $(xmlData);
var jccNav = jData.find("Navigation");
var jSections = jccNav.children();
var jList = $("#Navi");
jSections.each(function(intSectionIndex)
{
var jSection = $(this);
var jTerm = $("<li></li>");
var jDef2 = $("<ul></ul>");
var jLevel2 = $("<b></b>");
var jLevel3 = $("<b></b>");
jSection.children().children().each(function(intPartIndex)
{
var jPart3 = $(this);
var jText3 = $("<li></li>");
// Set the li text.
jText3.html("<a>" + jPart3.attr("tooltip") + "3.level</a>");
// Append to list.
jLevel3.append(jText3);
});
jSection.children().each(function(intPartIndex)
{
var jPart2 = $(this);
var jText2 = $("<li></li>");
// Set the li text.
jText2.html("<a>" + jPart2.attr("tooltip") + " 2.level </a><ul>" + jLevel3.html());
// Append to list.
jLevel2.append(jText2);
});
jTerm.html("<a>"
+ $(this).attr("tooltip")
+ "1.ebene</a>"
+ "<ul>"
+ jLevel2.html()
);
jList.append(jTerm);
$("#homer").html(jList.html());
});
};
$(document).ready(function()
{
$.get("content.xml", {}, XmlOnLoad);
});
</script>
</head>
<body>
<div id="homer"></div>
</body>
</html>
Content.xml
<?xml version="1.0" encoding="utf-8"?>
<Navigation>
<Navigation_sub_1 tooltip="Strategy">
<!--1 Button-->
<level_2 name="Nav1" number="5" tooltip="Views">
<level_3 name="Nav1_5" number="15" tooltip="IBM" />
<level_3 name="Nav1_5" number="13" tooltip="Mainframe" />
<level_3 name="Nav1_5" number="7" tooltip="Novell" />
<level_3 name="Nav1_5" number="6" tooltip="Open- Source"/>
<level_3 name="Nav1_5" number="1" tooltip="Oracle" />
<level_3 name="Nav1_5" number="9" tooltip="SAP" />
<level_3 name="Nav1_5" number="8" tooltip="Sun" />
</level_2>
</Navigation_sub_1>
<!--2 Button-->
<Navigation_sub_2 tooltip="UML">
<level_2 name="Nav2" number="5" tooltip="Development">
<level_3 name="Nav2_5" number="10" tooltip="Architecture"/>
<level_3 name="Nav2_5" number="6" tooltip="Patterns" />
<level_3 name="Nav2_5" number="1" tooltip="SOA" />
</level_2>
</Navigation_sub_2 >
<!--3 Button-->
<Navigation_sub_3 tooltip="Platform">
<level_2 name="Nav3" number="1" tooltip="Model">
<level_3 name="Nav3_1" number="15" tooltip="BPEL" />
<level_3 name="Nav3_1" number="9" tooltip="BPMN" />
<level_3 name="Nav3_1" number="7" tooltip="DSL" />
<level_3 name="Nav3_1" number="10" tooltip="Oslo" />
<level_3 name="Nav3_1" number="1" tooltip="UML" />
</level_2>
<level_2 name="Nav3" number="7" tooltip="Service" >
<level_3 name="Nav3_7" number="3" tooltip="Azure Services" />
<level_3 name="Nav3_7" number="11" tooltip="ISB" />
<level_3 name="Nav3_7" number="6" tooltip="Live" />
<level_3 name="Nav3_7" number="8" tooltip="Live Mesh" />
<level_3 name="Nav3_7" number="13" tooltip="REST" />
<level_3 name="Nav3_7" number="9" tooltip="Web- services" />
<level_3 name="Nav3_7" number="1" tooltip="Windows Azure" />
</level_2>
</Navigation_sub_3>
</Navigation>