javascript - How to get I get leaf nodes in jstree to open their hyperlink when clicked when using jstree ui -
i display hierachial structure using jtree, data 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 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 displays okay, filesystem.
this part of frameset , displayed on left handside of screen , when user clicks on leaf node want open attached link on right handside (as before applied jtree stuff it)
my jtree configuration 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 ui plugin bind select_node .bind("select_node.jstree", function (event, data) { // `data.rslt.obj` jquery extended node clicked alert(data.rslt.obj.attr("id")); }) // 2) if not using ui plugin - anchor tags work expected // if anchor has href attirbute - page changed // can prevent default, etc (normal jquery usage) .delegate("a", "click", function (event, data) { event.preventdefault(); }) }); and tried .delegate option had no effect , assume have remove"ui" plugin trying page looks ive never applied jstree.
the bind option sort of worked, in displays annoying alert window displaying id every time click on node. how can change open link in right handside instead ?
update found answer jstree nodes don't work when ui plugin used
adding
.bind("select_node.jstree", function (e, data) { var href = data.rslt.obj.children("a").attr("href"); // load content div: $("#contents").load(href); // follow link: document.location.href = href; }) now link opened when clicked on, unfortunately replaces lefthandside frame page, whereas want put right hand pane, ideas.
for new versions;
$("#demo2").jstree().bind("select_node.jstree", function (e, data) { var href = data.node.a_attr.href; document.location.href = href; });
Comments
Post a Comment