CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsjstree
xil3
xil3

Reputation: 16449

Anchor tag(s) in jsTree node generating error

I tried adding anchor tags within the li tag, but it generates the following error, which has been driving me crazy. I'm assuming it's because jsTree is automatically adding an anchor tag just under the li tag, and therefore, I am placing an anchor within an anchor.

angular.js:13920TypeError: Cannot read property 'childNodes' of undefined

Here is the markup:

<div id="jstree_dbs_div">
     <ul>
         {% for type in types %}
             <li data-jstree='{"checkbox_disabled":true}'>
                 {{ type['parent']['text'] }} <span><a href="#">edit</a></span>
             </li>
         {% endfor %}
     </ul>
</div>

If I remove that anchor tag, it works fine (ie. no error).

Here is the jsTree config:

$jsTree.jstree({
    "core": {
        multiple: false,
    },
    "conditionalselect": function (node, event) {
        return false;
    },
    "plugins" : [ "wholerow", "checkbox", "conditionalselect" ],
    "checkbox": { cascade: "", three_state: false },
}).on("ready.jstree", function() {
    $jsTree.jstree('open_all');
}).on("select_node.jstree", function (e, data) {
    var href = data.node.a_attr.href;
    document.location.href = href;
});

Upvotes: 2

Views: 942

Answers (2)

xil3
xil3

Reputation: 16449

Wrapping my jsTree config in a timeout seems to have fixed the error. I also added a few other things (which had nothing to do with the original problem).

setTimeout(function(){
    $jsTree = $('#jstree_dbs_div');

    $jsTree.jstree({
        "core": {
            multiple: false,
        },
        "conditionalselect": function (node, event) {
            var href = event.target.href;
            document.location.href = href;

            return false;
        },
        "plugins" : [ "wholerow", "checkbox", "conditionalselect" ],
        "checkbox": { cascade: "", three_state: false },
    }).on("ready.jstree", function() {
        $jsTree.jstree('open_all');
    });
}, 0);

Upvotes: 1

Nikolay Ermakov
Nikolay Ermakov

Reputation: 5061

I don't see issues with adding this functionality, as far as you can control markup inside the jsTree node. Even if jsTree doesn't let you get an embedded link, you can still reach it with regular javascript as below, also check demo - Fiddle Demo. However, it is not Angular.

In a tree node config:

{ "id": ..., 
  "parent": ..., 
  "text": "Text before link<a class='link' href='www.google.com'>google.com</a>" 
}

and then in the event handler:

.on("select_node.jstree", function (e, data) {
    var href = $(data.event.currentTarget).find('.link').attr('href');
    document.location.href = href;
});

Upvotes: 0

Related Questions