I display a hierachial structure using jtree, the data is as follows
<div id=songchanges><ul>
<li id=phtml_1>
<a href=#>C:</a>
<ul>
<li id=phtml_2>
<a href=#>Music</a>
<ul>
<li id=phtml_3>
<a href=#>Z</a>
<ul>
<li id=phtml_4>
<a href=#>Hans Zimmer</a>
<ul>
<li id=phtml_5><a href=FixSongsReport_00107_2013-09-04-11-11-55_body_blqxgT7E7YOmnBbjFXQGUg==.html>C:MusicZHans ZimmerHannibal</a></li>
</ul>
</li>
<li id=phtml_6>
<a href=#>The Zombies</a>
<ul>
<li id=phtml_7><a href=FixSongsReport_00107_2013-09-04-11-11-55_body_er7mjWKbAaYaf8DygP84Fg==.html>C:MusicZThe ZombiesBest of The Zombies</a></li>
<li id=phtml_8><a href=FixSongsReport_00107_2013-09-04-11-11-55_body_56XgVDhsjEKWXFd4OzVldA==.html>C:MusicZThe ZombiesThe Zombies featuring Colin Blunstone & Rod Argent</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
and it displays okay, as a filesystem.
This is the part of a frameset and is displayed on the left handside of the screen and when user clicks on leaf node I want it to open the attached link on the right handside (as it does before i applied jtree stuff to it)
My jtree configuration is as follows
<head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8/>
<link rel=stylesheet type=text/css href=songkong.css>
<base target=main>
<script type=text/javascript src=http://static.jstree.com/v.1.0pre/jquery.js></script>
<script type=text/javascript src=http://static.jstree.com/v.1.0pre/jquery.cookie.js></script>
<script type=text/javascript src=http://static.jstree.com/v.1.0pre/jquery.hotkeys.js></script>
<script type=text/javascript src=http://static.jstree.com/v.1.0pre/jquery.jstree.js></script>
<link rel=stylesheet href=/resources/demos/style.css />
<script type=text/javascript class=source below>
$(function () {
$(#songchanges)
.jstree({
plugins : [themes,html_data,ui,crrm,hotkeys],
core : { initially_open : [ phtml_1 ] }
})
.bind(loaded.jstree, function (event, data) {
});
$(#songchanges).bind(open_node.jstree, function (e, data) {
data.inst.select_node(#phtml_1, true);
});
});
</script></head>
I read demo3 example
$(function () {
$(#demo3)
.jstree({ plugins : [themes,html_data,ui] })
// 1) if using the UI plugin bind to select_node
.bind(select_node.jstree, function (event, data) {
// `data.rslt.obj` is the jquery extended node that was clicked
alert(data.rslt.obj.attr(id));
})
// 2) if not using the UI plugin - the Anchor tags work as expected
// so if the anchor has a HREF attirbute - the page will be changed
// you can actually prevent the default, etc (normal jquery usage)
.delegate(a, click, function (event, data) { event.preventDefault(); })
});
and tried it but the .delegate option had no effect , I assume i have to removeui plugin but trying that my page just looks like Ive never applied jstree.
The bind option sort of worked, in that it displays an annoying alert window displaying the id every time i click on any node. So how can I change it to open the link in the right handside instead ?
Update
Found this answer Jstree nodes don't work when ui plugin is used
Adding
.bind(select_node.jstree, function (e, data) {
var href = data.rslt.obj.children(a).attr(href);
// this will load content into a div:
$(#contents).load(href);
// this will follow the link:
document.location.href = href;
})
Now the link is opened when clicked on, unfortunately it replaces the lefthandside frame with the page, whereas I want it put it into the right hand pane, any ideas.
