1) Drop down for the First Level Parent Nodes in JSP file
<ul id="nav1">
<li class="Level1"><select id="dropd" onChange="onClickdropdown()">
<nav:iterateInitialNavNodes>
<option>
<nav:ifNavNodeInSelectedPath>
<nav:navNodeAnchor navigationMethod="byEPCM" useQuickLink="true" />
</nav:ifNavNodeInSelectedPath>
<nav:ifNotNavNodeInSelectedPath>
<nav:navNodeAnchor navigationMethod="byEPCM" useQuickLink="true"/>
</nav:ifNotNavNodeInSelectedPath>
</option>
</nav:iterateInitialNavNodes>
</select></li>
</ul>
2) In my JS file - I am drawing the TLN based on drop down
$(document).ready(function(){
jQuery("#dropd").change(function(){
var nodeName = jQuery(this).val();
drawMenu(nodeName);
});
});
function drawMenu(nodeName){
var sapTreeEl = document.getElementById("nav");
jQuery("#nav").empty();
EPCM.getSAPTop().LSAPI.AFPPlugin.model.getNavigationSubTree(nodeName,drawFirstLevel, sapTreeEl);
}
function drawFirstLevel(nodes, container) {
for (var i=0; i<nodes.length; i++){
var title = find_title(nodes[i]);
var newTitle = title.replace(" ", "_" );
jQuery("#nav").append("<li id = " + newTitle + " class='Level1'><a href='' ><span class='d-text'>"+title+"</span><span class='d-arrow1'></span> </a></li>");
if(nodes[i].hasChildren())
{
jQuery('#'+ newTitle).append("<ul></ul>");
nodes[i].getChildren(drawSecondLevel, container);
}
} //End For
}
function drawSecondLevel(nodes1, container) {
for(var i=0;i<nodes1.length;i++)
{
var title = find_title(nodes1[i]);
jQuery("li.level1 ul").append("<li class='Level2'><a href='' >"+title+"</a></li>");
}
Problem IS :
Issue is that when a drop down entry is selected the first time, its corresponding first level nodes are being rendered properly but not the second level nodes(all second level nodes are getting appended to last top level node).
However when the same drop down entry is selected again second time all the nodes including both first and second level are being rendered properly.
Anyone is aware of this behavior or how we can correct it ?