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>"

Answer 1

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.

Answer 2

            .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;
 })

Answer 3

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.

Answer 4

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