How do I get leaf nodes in jstree to open their hyperlink when clicked when using jstree ui?
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:\Music\Z\Hans Zimmer\Hannibal</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:\Music\Z\The Zombies\Best of The Zombies</a></li>
<li id="phtml_8"><a href="FixSongsReport_00107_2013-09-04-11-11-55_body_56XgVDhsjEKWXFd4OzVldA==.html">C:\Music\Z\The Zombies\The 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 remove"ui" 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.
Answer
for new versions;
$("#demo2").jstree().bind("select_node.jstree", function (e, data) {
var href = data.node.a_attr.href;
document.location.href = href;
});