JStree set link href and redirect

Question

I'm using jstree in my rails app, and i'm using json data for it, but i have trouble: how i can set for nodes link and href for it, so that i can go on it? Json look's like this:

var data = [
{
   "data":"\u041b\u0435\u0433\u043a\u043e\u0432\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u0438",
   "href":10001,
   "children":[
      {
         "data":"\u041a\u0443\u0437\u043e\u0432",
         "href":10101,
         "children":[
            {
               "data":"\u0422\u043e\u043f\u043b\u0438\u0432\u043d\u044b\u0439 \u0431\u0430\u043a / \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0443\u044e\u0449\u0438\u0435",
               "href":10316
            },
            {
               "data":"\u041a\u0440\u0435\u043f\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0434\u0438\u0430\u0442\u043e\u0440\u0430",
               "href":10317
            },
            {
               "data":"\u041e\u0431\u043b\u0438\u0446\u043e\u0432\u043a\u0430 / \u0437\u0430\u0449\u0438\u0442\u0430 / \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 / \u044d\u043c\u0431\u043b\u0435\u043c\u044b / \u0437\u0430\u0449\u0438\u0442\u0430 \u0440\u0430\u0441\u043f\u044b\u043b.",
               "href":10319,
               "children":[
                  {
                     "data":"\u041e\u0431\u043b\u0438\u0446\u043e\u0432\u043a\u0430/\u0437\u0430\u0449\u0438\u0442\u043d\u0430\u044f \u043d\u0430\u043a\u043b\u0430\u0434\u043a\u0430",
                     "href":10840
                  },
                  { ................................

And js

$("#tree").jstree({
    plugins: ['themes', 'json_data'],
    json_data: {data: data},
      themes: {
          theme: 'apple'
      },   
  });
  $('#tree').bind('select_node.jstree', function(e,data) { 
    window.location.href = "123123"
});

but if i see code, link have href = "#". What's wrong?

Solution 1

a JSTree Node object does not have href attribute.. if you want to set it you will have to use attr attribute and include an array of key, value pairs that will identify any of the attributes that JSTree will place in your HTML output.. consider the following example:

$(function () {
$("#demo1").jstree({ 
    "json_data" : {
        "data" : [
            { 
                "data" : "A node", 
                "metadata" : { id : 23 },
                "children" : [ "Child 1", "A Child 2" ]
            },
            { 
                "attr" : { "id" : "li.node.id1" }, 
                "data" : { 
                    "title" : "Long format demo", 
                    "attr" : { "href" : "#" } 
                } 
            }
        ]
    },
    "plugins" : [ "themes", "json_data", "ui" ]
}).bind("select_node.jstree", function (e, data) { alert(data.rslt.obj.data("id")); });
});

and follow the DOC:

JSTree JSON-DATA pulgin DOC

Solution 2

To add an href element to the anchor tag, you should do something like so:

1. Add an href element to the a element
2. Listen for a click on the element
3. Redirect to the url

Something like so:

    $("#tree_asset").jstree({
            "data": [{
                    "text": "Parent",
                    "icon": "fas fa-city text-default",
                    "children": [
                    {
                        "text": "Child - Linked to StackOverflow website",
                        "icon": "fas fa-building text-danger",
                        "a_attr" : {"href": "https://stackoverflow.com/"},
                    }]
             }],
           "plugins": ["contextmenu", "state", "types"]
    }).on('changed.jstree', function (e, data) {
        var href = data.node.a_attr.href;
        var parentId = data.node.a_attr.parent_id;
        if(href == '#')
        return '';
        window.location.href = href;
    });

Solution 3

In the event that you want to target a link that is in your anchor link href attribute you can use either window.open or location.href firstly you need to add in your output to html the anchor tag inside of the tag, either directly or programatically before the jstre plugin initialization.

Your html markup should look like this..

 <li class="jstree-open" id="node_1"><a href="my-file.pdf">file</a></li>

In the jstree instantiation...

    .on('changed.jstree', function (e, data) {
    
     let hreflink = data.node.a_attr.href;

     if(hreflink != '#'){
     window.open(hreflink); //to open in a new window or tab
     location.href=hreflink; //to open in the same page
    }
    
});

Comments

[Arturo Molina]

This seems to add the href attribute to the li element and not the anchor element