All geek questions in one place

How to get to get leaf nodes in jstree to open their hyperlink when clicking on jstree ui

I am showing a hierarchical structure using jtree given below

<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 looks normal like a file system.

This is part of a set of frames and is displayed on the left side of the screen, and when the user clicks on the node sheet, I want him to open the attached link on his right hand (as 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 am reading a demo

 $(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 need to remove the "ui" plugin, but try to make my page look like Ive never used jstree.

Sorting the processed binding option as it displays an annoying warning window displaying an identifier every time I click on any node. So, how can I change it to open the link in my right hand instead?

Update Found this answer Jstree nodes do not work when using the ui plugin

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 opens when clicked, unfortunately, it replaces the lefthandside frame with the page, while I want it to put it in the right panel, any ideas.

+6
source share
5 answers

for new versions;

 $("#demo2").jstree().bind("select_node.jstree", function (e, data) { var href = data.node.a_attr.href; document.location.href = href; });
+16
source

I know this post is a little old, but here is what I did to make this work:

html:

 <div id="entryPointTree"> <ul> <li>Produits des mains <ul> <li><a href="http://www.google.ca" class="jstree-clicked">Lien 1</a></li> <li>item 2</li> </ul> </li> <li>Produits des pieds</li> </ul> </div>

js:

 $(document).ready(function() { $("#entryPointTree").jstree({ "plugins" : ["themes","html_data","ui"] }); $("#entryPointTree li").on("click", "a", function() { document.location.href = this; } ); });
+3
source

Try it.

 $("#demo2").jstree().bind("select_node.jstree", function (e, data) { var href = data.rslt.obj.children("a").attr("href"); document.location.href = href; // $("#the_div").load(href); }) ;
+2
source

My solution for v3.3.4, it works great!

 tree.jstree().on("click", ".jstree-anchor", function() { document.location.href = this.href; });
+1
source

None of the other answers does what I want: a few <a> tags in the node header. This is what worked for me:

HTML

 <div id="object-tree"> <ul> <li>SomeTitle <a href="/link1" target="_blank">link1><a href="/link2" target="_blank">link2</a></li> </ul> </div>

Javascript

 jQuery('#object-tree').jstree().bind("select_node.jstree", function (e, data) { // Allow links to work from within jstree nodes window.open( jQuery(data.event.originalEvent.originalTarget).attr('href'), '_blank'); });
0
source

Source: https://habr.com/ru/post/953143/

More articles:


All Articles