How do I get leaf nodes in jstree to open their hyperlink when clicked when using jstree ui?

Question

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.

I rephrased my question and got an answer here http://stackoverflow.com/questions/18636868/unable-to-replace-contents-of-frame-using-javascript-from-another-frame — Paul Taylor, Sep 06 '13 at 09:39

score 21 · Accepted Answer · answered Sep 02 '14 at 14:21

21

for new versions;

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

answered Sep 02 '14 at 14:21

Hubeyb Özkul

646
7
8

4

it's better to use **`window.open( data.node.a_attr.href, data.node.a_attr.target )`** instead of the two lines since it will also correctly handle the (optional) `target` declaration. – Andreas Covidiot Nov 29 '16 at 13:18
I have to add `if (href[0] !== "#")` – Polv Mar 09 '19 at 08:18

score 5 · Answer 2 · answered Dec 14 '15 at 20:19

I know this post is kinda old, but here 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;
        }
    );
});

I just tested that, it still works fine, contrary to all the other outdated suggestions I could find. Just a note: the 2nd line in your example is not needed for the click behavior to work. — Jocelyn, Jun 13 '16 at 01:08

score 4 · Answer 3 · answered May 05 '17 at 14:28

4

My solution for v3.3.4, it works fine!

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

answered May 05 '17 at 14:28

Alper Aydingül

251
1
9

This will not work for childrens. – Ivan Jun 20 '22 at 22:19

score 3 · Answer 4 · answered Nov 30 '13 at 09:02

3

Try This.

$("#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); 
    }) ;

answered Nov 30 '13 at 09:02

user193887

47
4

I needed to change the second line to: var href = data.node.a_attr.href; – jonazu May 23 '14 at 09:44
the the newer versions (3+) data.rslt is no more available. data.node returns the node object – BiLaL Aug 17 '15 at 07:32

score 0 · Answer 5 · answered Aug 04 '16 at 23:28

None of the other answers do what I want: multiple <a> tags in the title of the node. 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');
});

How do I get leaf nodes in jstree to open their hyperlink when clicked when using jstree ui?

5 Answers5

Linked