this is my region.xml:-
\[code\]<child_4 entity_id="4" value="http://stackoverflow.com/questions/15726432/Activities" parent_id="2"> <child_10066 entity_id="10066" value="http://stackoverflow.com/questions/15726432/Physical1" parent_id="4"> <child_10067 entity_id="10067" value="http://stackoverflow.com/questions/15726432/Cricket" parent_id="10066"> <child_10068 entity_id="10068" value="http://stackoverflow.com/questions/15726432/One Day" parent_id="10067"/> </child_10067> </child_10066> <child_10069 entity_id="10069" value="http://stackoverflow.com/questions/15726432/Test2" parent_id="4"/> <child_10070 entity_id="10070" value="http://stackoverflow.com/questions/15726432/Test3" parent_id="4"/> <child_10071 entity_id="10071" value="http://stackoverflow.com/questions/15726432/Test4" parent_id="4"/> <child_10072 entity_id="10072" value="http://stackoverflow.com/questions/15726432/Test5" parent_id="4"/> <child_5 entity_id="5" value="http://stackoverflow.com/questions/15726432/Physical" parent_id="4"/></child_4> \[/code\]
this is my code:-
\[code\]<script>data = http://stackoverflow.com/questions/15726432/false;$(document).ready(function() { $('#loader').click(function() { $(this).hide(); $.ajax({ type: "GET", url: "region.xml", dataType: "xml", success: function(xml) { data = http://stackoverflow.com/questions/15726432/xml; ul = $("<ul></ul>"); $(xml).find('child_4').each(function(){ var value_text = $(this).attr('value'); var id = $(this).attr('entity_id'); li = $("<li id='" + id + "'></li>"); li.html(value_text); ul.append(li); $(this).unbind('click'); }); //close each( ul.appendTo('#firstLevelChild'); } }); //close $.ajax( }); //close click( $(document).on("click", "li", function(event) { event.stopPropagation(); loadChild($(this).attr("id"), event); return false; });});function loadChild(id) { var obj = $("#firstLevelChild #" + id); if(obj.data("loaded") == null) { ul = "<ul>"; var path = (id == 0) ? "root" : "[entity_id='" + id + "']"; // Only if it contains children if( $(data).find(path).children().length > 0) { $("li").hide(); $("#path").text($("#path").text() + " - " + obj.text()); } $(data).find(path).children().each(function(){ var value_text = $(this).attr('value'); var id = $(this).attr('entity_id'); ul += "<li id='" + id + "'>" + value_text + "</li>"; }); ul += "</ul>"; obj.after(ul); obj.data("loaded", true); } else { $("#" + id + " ul").remove(); obj.data("loaded", null); }}</script><body> <div id="loader"> <span id='update-target'>Click here to load value</span> </div> <div id="firstLevelChild"></div> <div id="path"></div></body>\[/code\]i am try to find child_4 element and get there all child element attribute value.
and want to make same as menu bar.
as over normal menu. like:- \[code\]File menu.\[/code\]
if we click on \[code\]file\[/code\] menu then its open there sub menu like:- \[code\]New\[/code\], \[code\]Open\[/code\], \[code\]Save\[/code\], \[code\]Save As\[/code\]...etc.
Same as here \[code\]Activities\[/code\] is Main and click on them then.
drop drown there sub menu like:-
\[code\]Physical1\[/code\]
\[code\]Test2\[/code\]
\[code\]Test3\[/code\]
\[code\]Test4\[/code\]
\[code\]Test5\[/code\]
\[code\]Physical\[/code\]
if mouse-over on \[code\]Physical1\[/code\] then display there sub node like:-
\[code\]Physical1\[/code\](mouse over)\[code\]Cricket\[/code\]
if \[code\]Cricket\[/code\] have child node. then mouse over on them then display:-
\[code\]Physical1\[/code\] \[code\]cricket\[/code\] \[code\]One Day\[/code\].
if mouse out the \[code\]menu\[/code\](div) then hide all child node only display \[code\]Activities\[/code\].
\[code\]<child_4 entity_id="4" value="http://stackoverflow.com/questions/15726432/Activities" parent_id="2"> <child_10066 entity_id="10066" value="http://stackoverflow.com/questions/15726432/Physical1" parent_id="4"> <child_10067 entity_id="10067" value="http://stackoverflow.com/questions/15726432/Cricket" parent_id="10066"> <child_10068 entity_id="10068" value="http://stackoverflow.com/questions/15726432/One Day" parent_id="10067"/> </child_10067> </child_10066> <child_10069 entity_id="10069" value="http://stackoverflow.com/questions/15726432/Test2" parent_id="4"/> <child_10070 entity_id="10070" value="http://stackoverflow.com/questions/15726432/Test3" parent_id="4"/> <child_10071 entity_id="10071" value="http://stackoverflow.com/questions/15726432/Test4" parent_id="4"/> <child_10072 entity_id="10072" value="http://stackoverflow.com/questions/15726432/Test5" parent_id="4"/> <child_5 entity_id="5" value="http://stackoverflow.com/questions/15726432/Physical" parent_id="4"/></child_4> \[/code\]
this is my code:-
\[code\]<script>data = http://stackoverflow.com/questions/15726432/false;$(document).ready(function() { $('#loader').click(function() { $(this).hide(); $.ajax({ type: "GET", url: "region.xml", dataType: "xml", success: function(xml) { data = http://stackoverflow.com/questions/15726432/xml; ul = $("<ul></ul>"); $(xml).find('child_4').each(function(){ var value_text = $(this).attr('value'); var id = $(this).attr('entity_id'); li = $("<li id='" + id + "'></li>"); li.html(value_text); ul.append(li); $(this).unbind('click'); }); //close each( ul.appendTo('#firstLevelChild'); } }); //close $.ajax( }); //close click( $(document).on("click", "li", function(event) { event.stopPropagation(); loadChild($(this).attr("id"), event); return false; });});function loadChild(id) { var obj = $("#firstLevelChild #" + id); if(obj.data("loaded") == null) { ul = "<ul>"; var path = (id == 0) ? "root" : "[entity_id='" + id + "']"; // Only if it contains children if( $(data).find(path).children().length > 0) { $("li").hide(); $("#path").text($("#path").text() + " - " + obj.text()); } $(data).find(path).children().each(function(){ var value_text = $(this).attr('value'); var id = $(this).attr('entity_id'); ul += "<li id='" + id + "'>" + value_text + "</li>"; }); ul += "</ul>"; obj.after(ul); obj.data("loaded", true); } else { $("#" + id + " ul").remove(); obj.data("loaded", null); }}</script><body> <div id="loader"> <span id='update-target'>Click here to load value</span> </div> <div id="firstLevelChild"></div> <div id="path"></div></body>\[/code\]i am try to find child_4 element and get there all child element attribute value.
and want to make same as menu bar.
as over normal menu. like:- \[code\]File menu.\[/code\]
if we click on \[code\]file\[/code\] menu then its open there sub menu like:- \[code\]New\[/code\], \[code\]Open\[/code\], \[code\]Save\[/code\], \[code\]Save As\[/code\]...etc.
Same as here \[code\]Activities\[/code\] is Main and click on them then.
drop drown there sub menu like:-
\[code\]Physical1\[/code\]
\[code\]Test2\[/code\]
\[code\]Test3\[/code\]
\[code\]Test4\[/code\]
\[code\]Test5\[/code\]
\[code\]Physical\[/code\]
if mouse-over on \[code\]Physical1\[/code\] then display there sub node like:-
\[code\]Physical1\[/code\](mouse over)\[code\]Cricket\[/code\]
if \[code\]Cricket\[/code\] have child node. then mouse over on them then display:-
\[code\]Physical1\[/code\] \[code\]cricket\[/code\] \[code\]One Day\[/code\].
if mouse out the \[code\]menu\[/code\](div) then hide all child node only display \[code\]Activities\[/code\].