JS Tree links not active

Question

I am new to Jquery and JS Tree but learning to love it. I have set up a tree menu using php generated xml (see code below). It works as expected with one exception - The links are not active.

I know there is something basic I don't understand. Short term I just want the links to function as normal links. Long term I want them to trigger an ajax call that will reload a specific div on the page.

Can anyone point me in the right direction? Thanks much for the help!

$(function () {
        $("#mainMenu").jstree({
                xml_data : { data : <?php $menu->deliver(); ?> },
                core : { animation : 1000 }
                ui : { select_limit : 1, selected_parent_close : false },
                themes : { theme : "default", dots : true, icons : false },
                types : { types : { "heading" : { select_node : true } } },
                plugins : [ "themes", "xml_data", "ui", "types" ]
        });
});

Example xml (single item):

"<root><item id='pubPages_home' parent_id='0'><content><name href='?
a=pubPages&amp;f=home'>Public Home</name></content></item><root>"

What links don't work? If you click the node name? What do you want to happen? Could you provide jsfiddle sample? — Radek, Dec 05 '11 at 00:32
@Radek The nodes do work (open and close the tree) as expected. The a tag hrefs don't function. When hovering over the links, the browser recognizes them, but clicking does not send the browser to the link. I suspect JS Tree has invoked preventDefault() for click on the a tags. — Andy B, Dec 05 '11 at 10:45

srgi0 · Answer 1 · 2014-07-23T03:51:59.130

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

jstree version: "3.0.0", jquery: last

update: or best way for me:

.bind("select_node.jstree", function (e, data) {
  $('#jstree').jstree('save_state');
 }) ;

.on("activate_node.jstree", function(e,data){
   window.location.href = data.node.a_attr.href;
 })

score 3 · Answer 2 · edited Jul 28 '14 at 16:07

I know this is old, but I came here looking for a quick fix. Lubor Bílek is mostly correct, but bear in mind that jsTree will bind the parent <li> of the clicked anchor element.

I solved this by doing:

.bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.find('a').attr("href"); 
});

That way, the event will bind to the child <a> of the <li> instead of the <li> itself, so that you can have the href attribute on your anchors instead of your list items.

score 2 · Answer 3 · answered May 21 '14 at 09:06

2

I solved right now this problem with a little brute force

<li id="child_node_1"><span onClick="javascript:window.location.href='your_page.html'" title="Lassie come home!">your text here</span></li>

nice and easy.

answered May 21 '14 at 09:06

Francesco

2,042
2
19
29

score 2 · Answer 4 · answered Jan 13 '12 at 19:40

I think you need to explicitly write the click handler for the tree node links. JsTree takes the click event for itself and do not let it go to redirect page.

I would try to go this way:

$('#mainMenu').bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.attr("href"); 
});

score 1 · Answer 5 · answered Apr 01 '14 at 07:40

I try this code:

window.location.href = data.rslt.obj.find('a').attr("href");

It raise data.rslt undefined error, so I can not get href with it!

here is my available code:

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

Is related to the version of jstree? My jstree version: 3.0.0-bata10

Saman Mohamadi · Answer 6 · 2014-05-30T16:05:43.317

1

Try this:

jQuery("#mytree ul").on("click","li.jstree-node a",function(){
    document.location.href = this; 
});

Thanks to jQuery event delegation , this event will delegate to <a> elemets . if you doesn't use event delegation it will fire just for first time you click each anchor.

edited May 30 '14 at 16:05

answered May 28 '14 at 20:27

Saman Mohamadi

4,454
4
38
58

Why should the OP "try this"? Can you provide an explanation that will benefit the OP as well as future visitors to SO? – Jay Blanchard May 28 '14 at 20:48

score 0 · Answer 7 · answered Mar 24 '14 at 06:20

I find a simple way.

$('#'+target).jstree({ 'core' : {
    'data' : treeInfo
} });

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

I found that the jstree used the "jstree-anchor" class for the li lists. So, I can find href link from the this object, I can make this link without any bounding functions.

Milad Safaei · Answer 8 · 2014-08-27T22:18:25.690

Usually we need to control the action of both "Container Nodes" and "Child Nodes" together.

So we can do thomething like :

$("#jstree-div").jstree().delegate("a","click", function(e) {
            if ($("#jstree-div").jstree("is_leaf", this)) {
                document.location.href = this;
            }
            else {
                $("#jstree-div").jstree("toggle_node", this);
            }
        });

"is_leaf" is one of jsTree functions that checks if a node has no children.

JS Tree links not active

8 Answers8