mike.younes
-
Posts
9 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by mike.younes
-
-
oki removed the var ul = $("<ul>").appendTo(node) and put it before the for loop
it fixed the first few branches places, but not after that (for example control2 is still a child of control1 in sub2 of main1)
-
i have a json file (2nd link) and im using a code to get the objects of the json file and output them as a tree. however the nodes are coming out misplaced. for example Mainstation 2 should be a sibling to Mainstation1, however it is coming out as a child of it. the problem should be in the traverse function.https://jsfiddle.net/mikeyounes/4ndtmaun/1/https://api.myjson.com/bins/5a9vo
-
-
the problem should be in the traverse function. its a logic problem
-
thanks for the reply. the code is working. im getting a tree as output. the problem is that the branches within the tree are not where they are supposed to be. for example, mainstations are supposed to be siblings, but im getting mainstation 2 as a child of mainstation 1. ill post the json
-
im trying to output a json file to an expandable tree using html and jquery. its working, but the nesting and nodes within the tree are misplaced. any idea what that is? for example. mainstation 2 is coming out as a child of mainstation 1, while they should be siblings. it should be a logic error
html code:<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: "converted39.json", dataType: 'json', success: function(tree) { traverse($('#treeView'), tree) $('#treeView li:has(li)').addClass("Max").click(function(e) { $(this).toggleClass("Max Min"); $(this).children("ul").toggle(); e.stopPropagation(); }) $("[href]").addClass("Blue").click(function(e){ $(this).toggleClass("Purple"); e.stopPropagation(); window.location.href = $(this).attr("href") }) $('#treeView li').click(function(g) { var mytree2 = $(this); mytree2.children('li').toggle(); g.stopPropagation(); }) } }) }); function traverse(node, o) { for (var i in o) { if(i == "__text" || i == "_href" ) continue; if (o !== null && typeof(o)=="object") { if(o.__text){ var ul = $("<ul>").appendTo(node) var node=$('<li>').appendTo(ul) if(o._href){ var n = $("<span>").appendTo(node) $(n).text(o.__text).attr("href", o._href) } else{ $(node).text(o.__text) } } } traverse(node,o); } else{ var ul = $("<ul>").appendTo(node) if(o.__text){ var li = $('<li>' + o._text + '</li>').appendTo(ul) if(o._href){ var n = $("<span>").appendTo(node) $(n).text(o.__text).attr("href", o._href) } }else{ $('<li>' + o + '</li>').appendTo(ul) } } } } </script>
JSON CODE:{ "MAIN": { "MainStation": [ { "Substation": [ { "Control": "Control1n", "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control2" }, "PushButton": { "__text": "PushButton1", "_attr": "successnDatffffffffffffffffffffffffffffffffffffffffffffffffffffffffe:17july" }, "_href": "http://google.com", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1", "_attr": "Control1 woohoo" }, "Control": "Control2", "PushButton": "PushButton1", "__text": " Substation2nnnnnnn" }, { "Control": [ "Control1", "Control2", "Control3", "Control4" ], "__text": " Substation3nnnnnnnnn" }, { "PushButton": [ "PushButton1", "PushButton2" ], "__text": " Substation4nnnnn" } ], "__text": " Mainstation1nnnnnnnnn" }, { "Substation": [ { "Control": [ "Control1", "Control2" ], "PushButton": "PushButton1", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1" }, "Control": "Control2", "PushButtonExpandable": { "MiniPushButton": [ "MiniPushButton1", "MiniPushButton2" ], "__text": "PushButton1" }, "__text": " Substation2nnnnnnn" } ], "__text": " Mainstation2nnnnn" } ], "ElectricStation": { "Substation": [ { "Control": [ "Control1", "Control2" ], "PushButton": "PushButton1", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1" }, "Control": "Control2", "PushButtonExpandable": { "MiniPushButton": [ "MiniPushButton1", "MiniPushButton2" ], "__text": "PushButton1" }, "__text": " Substation2nnnnnnn" } ], "__text": " ElectricStation1nnnnn" }, "__text": " MAINnnnnnnn" }}
-
I got an XML file. I wrote a HTML code that traverses the xml file and outputs it as a tree from the html file
Im trying to figure out how to attach a link to the xml elements, such as when I click on the name in the output, its open a website. I tried:
< Control><![CDATA[<a href='http://www.transientminds.org'>Cli... Here for a demo</a>]]></Control>
Also tried:< ?xml version="1.0" encoding="UTF-8"?>< MAIN xmlns:xlink="http://www.w3.org/1999/xlin... MAIN< MainStation xlink:type="simple" xlink:href="http://google.com" xlink:show="new"> Mainstation1< /MAIN>both not workingAttached is the tree that im getting. i want such tht when i double click on Mainstation, or something else, to open google.com
expandable tree branches misplaced
in JavaScript
Posted
issue fixed. now dealing with other ######