jstree ajax load all nodes

Paul Dubé

unread,

Apr 27, 2014, 2:38:10 PM4/27/14

to jst...@googlegroups.com

I am using jstree 3 and having a hard time finding the exact solution to my simple problem.

I wish to display a tree using an ajax load. The idea is that I need to display a tree based on a user selection on the page. So when the selection changes I have to reset the tree and display a different tree. I don't wish to have lazy-loading if I can avoid it, since my tree is usually not that big, so loading the complete tree would be the ideal solution.

As a final note, I already have a tree displayed on that page. The additional tree will be displayed inside a tab in a jquery dialog.

Can anyone give me an example how to accomplish that?

Ivan Bozhanov

unread,

Apr 27, 2014, 3:06:38 PM4/27/14

to jst...@googlegroups.com

AJAX does not mean lazy load ... you can always supply all nodes in a single AJAX response - jstree will parse them and display them properly - take a look at the children property - make it an array and fill it with all of the nodes children. As for recreating the tree - it depends on your situation. You can either destroy the tree and create it anew with the new data, or refresh it and return the new data. For example:

.on("your-user-select-change", function () {
$("#tree").jstree("destroy");
$("#tree").jstree({ .. your config dependent on user selection .. })
});

Or if you want to only setup the tree once and have data or url or both change for the ajax request depending on your user selection:

$("#tree").jstree({ "core" : { "data" : {
"url" : function () { if(user-selectable-condition-1) return "some-url"; else return "other-url"; },
"data": function () { if(user-selectable-condition-1) return { "some" : "date" }; else return { "other" : "data"; },
...

.on("your-user-select-change", function () {
$("#tree").jstree("refresh");

Since I do not know your situation you'd have to choose the method - it depends on how you get the data, and what the user event is ... but it should be pretty straightforward - either destroy the tree and create anew, or refresh the tree. Also - if it will be a dialog that would be destroyed and then recreated maybe it is best to destroy and recreate the tree too...

Best regards,
Ivan

Paul Dubé

unread,

Apr 27, 2014, 3:25:14 PM4/27/14

to jst...@googlegroups.com

I know ajax does not mean lazy loading, but the only close examples I saw were about lazy loading.

Here's the code I have, which does not work (the tree display only 1 node without text). Eventually I will change getData to make an Ajax call and get the data from DB depending on the state of the drop-down.

  <select id="OutputTarget" onchange="ChangeOutputTarget();">
              <option value="1">Dev</option>
              <option value="2">QA</option>
              <option value="3">Prod</option>
          </select>
            <div id="OutputFiles" style="height:300px;overflow:scroll">
                <ul id="OutputContent">
                </ul>
            </div>

<script>
    function getData(node)
    {

        var tree = [
            { "id": "1", "parent": "#", "text": "Stuff1", "type": "folder" },
            { "id": "200", "parent": "#", "text": "Stuff2", "type": "default" },

            { "id": "300", "parent": "#", "text": "Stuff", "type": "default" },
            { "id": "400", "parent": "#", "text": "Stuff", "type": "default" },
            { "id": "500", "parent": "#", "text": "Stuff", "type": "default" },
            { "id": "600", "parent": "#", "text": "Stuff", "type": "default" },
            { "id": "700", "parent": "#", "text": "Stuff", "type": "default" },
            { "id": "800", "parent": "#", "text": "Stuff", "type": "default" },
            { "id": "900", "parent": "#", "text": "Stuff", "type": "default" },
            { "id": "1000", "parent": "#", "text": "Stuff", "type": "default" },
            { "id": "1100", "parent": "200", "text": "Stuff*", "type": "default" },
            { "id": "1200", "parent": "200", "text": "Stuff*", "type": "default" },
            { "id": "1300", "parent": "500", "text": "Stuff", "type": "default" },
            { "id": "1400", "parent": "500", "text": "Stuff", "type": "default" },
            { "id": "2300", "parent": "1400", "text": "Stuff", "type": "default" },
            { "id": "3500", "parent": "1400", "text": "Stuff", "type": "default" },
            { "id": "3600", "parent": "1400", "text": "Stuff", "type": "default" },
            { "id": "3700", "parent": "1400", "text": "Stuff", "type": "default" }
        ];

        return tree;
    }

function ChangeOutputTarget()
{
    $('#OutputFiles')
        .jstree({
            "core" : {
                "animation": 0,
                "multiple": false,
                'data' : {
                    'data' : function (node) {
                        return getData(node);
                    }
                }
                ,
                "themes": { "stripes": false }
            },
            "plugins" : [ "types" ],
            "types" : {
                "default" : {
                    "icon" : "/images/file.png"
                },
                "file" : {
                    "icon" : "/images/file.png"
                },
                "folder" : {
                    "icon" : "/images/folder.png"
                }
            }
        });
}
</script>

Ivan Bozhanov

unread,

Apr 28, 2014, 5:27:27 AM4/28/14

to jst...@googlegroups.com

Read the docs on specifying "data" as a function (it works with a callback, not a return value), it should be something like:

'data' : function (node, cb) {
                        cb(getData(node));
                    }

Best regards,
Ivan

Paul Dubé

unread,

Apr 28, 2014, 9:03:25 PM4/28/14

to jst...@googlegroups.com

Works great!

Again, you have the best support I've seen in a long time for a product.


    $<span style="background-color:

...

Ivan Bozhanov

unread,

Apr 29, 2014, 3:27:28 AM4/29/14

to jst...@googlegroups.com

Thank you :) I am glad it is working now. Well, I guess I try to make up for the bad docs by helping out - sorry, I guess documentation is not my strength :)

Best regards,
Ivan

function <span style="background-color:transparent;color:rg

...

Rachitha Madhawa

unread,

Jan 16, 2019, 5:01:30 AM1/16/19

to jsTree

This working for me

Thanks

Mazhar Imam Khan

unread,

Jan 29, 2019, 4:45:52 AM1/29/19

to jsTree

Were you able to change getData to make an Ajax call and get the data from DB depending on the state of the drop-down ?

I need similar help. Can you please help if you got it done. I will be very thankful.

Paul Dubé

unread,

Jan 30, 2019, 7:02:31 PM1/30/19

to jsTree

I finally got something like this:

Target: <select id=3D"OutputTarget"

onchange=3D"ChangeOutputTarget();">

</select>

<div id=3D"OutputFiles" class=3D"demo"

style=3D"height:470px;overflow:scroll">

</ul>

</div>

$(function () {

$('#OutputFiles')

.jstree({

"core" : {

"animation": 0,

"multiple": false,

'data' : function (node, cb) {

return cb(getData(node));

}

,

"themes": { "stripes": false }

},

"plugins" : [ "types" ],

"types" : OutputTypes

});

function ChangeOutputTarget()

{

$('#OutputFiles').jstree("refresh");

}

I did not have much time to check if all elements are there.

Let me know if it works for you.

Paul

Reply all

Reply to author

Forward