CODEWITHSUNDEEP
javascriptjqueryhtmljstree
zessx
zessx

Reputation: 68790

Clickable buttons inside a node

TL;DR - Is there a way to have working links in a jsTree node, without using JS redirection ?

I would like to add buttons inside a jsTree node, like this :

enter image description here

I used this code:

$('#tree').jstree({
    'core': {
        'multiple': false,
        'themes': {
            'responsive': false
        }
    }
});
/* custom */
body {
    font: 14px/14px "Lucida Sans Unicode", "Lucida Grande", sans-serif normal;
}
.actions a {
    background: #333;
    color: #ccc;
    font-size: 11px;
    line-height: 18px;
    border-radius: 4px;
    padding: 0 5px;
    text-decoration: none;
}
.actions a:hover {
    background: #999;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.9/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.1/jstree.min.js"></script>
<div id="tree">
    <ul>
        <li>
            <span class="content">Folder</span>
            <ul>
                <li>
                    <span class="content">Subfolder</span>
                    <ul>
                        <li>
                            <span class="content">File</span>
                            <span class="actions">
                                <a href="/open">open</a>
                                <a href="/delete">delete</a>
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

My problem is that jsTree create <a> tags on each node (for a semantic purpose) and intercept every click event. My own anchors are supposed to open a new page, but now nothing happens.

The author recommends to listen the changed.jstree event, and do the job myself :

$('#tree').on('changed.jstree', function (e, data) {
    document.location = data.instance.get_node(data.selected[0], true).a_attr.href;
}).jstree();

This solution would be perfectly acceptable if I wanted to use JS redirection. But I don't.
Currently, I edited jsTree source code to avoid event interception (you can have a look on this rejected PR), but like the author mentioned it, this is not the good way to do it. So here is my final question :

Is there a way to have working links in a jsTree node, without using JS redirection ?

I'm open to any suggestion, I still can use to catch/trigger events, and my HTML markup can be reorganized.

Upvotes: 4

Views: 5649

Answers (2)

vakata
vakata

Reputation: 3886

You can also try this:

$('#tree').on('ready.jstree', function () {
  $('#tree').off("click.jstree", ".jstree-anchor");
})

Upvotes: 5

vakata
vakata

Reputation: 3886

Take a look here Modify this plugin to your needs and then include it in your page and your plugins config array. You can even modify this to include the buttons inside the anchor (this example includes them in the list element), just make sure you include valid elements (use SPAN or I for example).

Upvotes: 0

Related Questions