jsTree async with preloaded data

Question

I am trying to make a tree view be async. When the page is rendered, there is default tree items displayed. jsTree tries to reload the root anyway.

I want the page to render (with jsTree init'ed) with default items rendered from browser, not the ajax call. Then we the user tries to go deeper, thats when I want to do do the ajax calls.

Any help is appreciated. Thanks!

Answer 1

From Documentation: If both data and ajax are set the initial tree is rendered from the data string. When opening a closed node (that has no loaded children) an AJAX request is made.

An example,

$(function () {
$("#demo4").jstree({ 
    "json_data" : {
        "data" : [
            { 
                "data" : "A node", 
                "state" : "closed"
            },
            { 
                "attr" : { "id" : "li.node.id" }, 
                "data" : { 
                    "title" : "Long format demo", 
                    "attr" : { "href" : "#" } 
                } 
            }
        ],
        "ajax" : { "url" : "/static/v.1.0rc/_docs/_json_data.json" }
    },
    "plugins" : [ "themes", "json_data" ]
});
});