CODEWITHSUNDEEP
jqueryjstree
Andy
Andy

Reputation: 5395

jstree 3.2.1 Links on nodes

Can anyone show a simple example of how to achieve the following two things using jstree 3.2.1

  1. Adding URL anchor links to nodes.
  2. Getting the links to open when the appropriate node is clicked on.

This may seem like a "do some research" question but I've spent a long time looking: the documentation on the jstree website is terrible, there are numerous forum posts (including here) which don't work for the latest version, or don't work at all. Then things on Google Groups saying examples will be posted in the next few days - from 2014, with no response.

I already have a jstree which is being populated using an ajax call to a PHP script. This returns the data in json format.

So a short example of what I'm returning is something like this:

[{"id" : "ajson1", "parent" : "#", "text" : "Item One"}]

All I'm trying to do is put an anchor on the text 'Item One' and make it function as a link when clicked on.

I've tried something like this:

[{"id" : "ajson1", "parent" : "#", "text" : "Item One", "attr":{"href":"http://www.example.com/"}} }]

Doesn't work either in terms of rendering the link (when inspected using Chrome Dev Tools) or clicking on it.

Upvotes: 3

Views: 5051

Answers (3)

drew08
drew08

Reputation: 11

To answer question number 2, for jstree 3.2.1, the following code will make your hyperlinks work, only if specified, and only if the text is clicked:

$("#jstree").on("select_node.jsTree", function (evt, data) {
    if (data.node.a_attr.href != "#" & data.event.bubbles) {
        window.open(data.node.a_attr.href, data.node.a_attr.target);
    }
    //do more stuff!
});

In other words, if you have nodes without links (href = "#"), it won't open a window when clicked. It also requires the user to click on the node text or icon to fire the hyperlink. This is particularly useful when adding custom elements to the node.

Upvotes: 0

nullmn
nullmn

Reputation: 607

To answer your questions:

  1. Adding URL anchor links to nodes.

When creating a node the href attribute can be set the following way:

$("#jstree").jstree("create_node", "#", { text: "customText", a_attr: { href: "customLink" } }, "last", false, false);
  1. Getting the links to open when the appropriate node is clicked on.

In a standard browser this should work:

$("#jstree").on("click", ".jstree-anchor", function(evt)
{
    var link = $(evt.target).attr("href");
    window.open(link, '_blank');
});

These solutions are not part of the clearly incomplete jsTree documentation!

Upvotes: 0

Andy
Andy

Reputation: 5395

Ok so after a long while I figured this out!

The mistake in my original json is that attr should be a_attr. That gets the link on the text 'Item One'.

Example:

[{"id" : "ajson1", "parent" : "#", "text" : "Item One", 
"a_attr":{"href":"http://www.example.com/"} }]

Then to make it go to the URL you can use something like this:

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

Upvotes: 4

Related Questions