jsTree and AJAX > Load all data via ajax

Question

I am trying to use http://www.jstree.com as I am very happy with the demos, including the node types and the context menus. My problem is that I am not quite sure how to load the node data from within jstree using "json_data": { "ajax": { ... } }. All the documentation that I have read seems like you still need to define the parent data manually and the ajax calls are only for lazy-loading children nodes.

My code is as follows:

$('#file_tree').jstree({
    "plugins": ["json_data", "themes", "ui", "crrm", "dnd", "search", "contextmenu"],
    "themes": {"theme": "apple"},
    "ui": {"select_limit": 1, "selected_parent_close": "deselect", "disable_selecting_children": "true", "initially_select": [0]},
    "crrm": {"input_width_limit": "50", "move": {"always_copy": "multitree"}},
    "dnd": {"open_timeout": "700"},
    "search": {},
    "contextmenu": {"select_node": "true"},
    "json_data" : 
    {
        "ajax" : 
        {
            "url" : "{{ url('components/tree/findall') }}",
            // the `data` function is executed in the instance's scope
            // the parameter is the node being loaded
            // (may be -1, 0, or undefined when loading the root nodes)
            "data" : function (node) { 
                    console.info("Nodes:",node);    
                     return {   
                            "operation" : "get_children",
                            "id" : node.attr ? node.attr("id").replace("node_","") : 1
                        };
                    }
        }
    }
})

the url 'components/tree/findall' returns all nodes with parent_id = NULL and all their children within them (effectively returning ALL node data) in the form of JSON as follows:

[{"id":1,"name":"Static Album 1","type":"folder","children":[{"id":3,"name":"Static Album 1.1","type":"folder","children":[]},{"id":4,"name":"Static Album 1.2","type":"folder","children":[]}]},{"id":2,"name":"Static Album 2","type":"folder","children":[{"id":5,"name":"Static Album 2.1","type":"folder","children":[]},{"id":6,"name":"Static Album 2.2","type":"folder","children":[]}]}]

But the route is never called upon loading the page (yes, I do have a div with id="file_tree"). If somebody has worked with jsTree and can give me some advise on how to get this working I would really appreciate it. Also, feel free to suggest alternatives if you feel that jsTree is not the goto solution for tree structures.

EDIT: I have gotten the route to call and retrieve data (turns out the jstree installed by bower is not working, so I downloaded a copy and placed it in my lib manually), but I am still not able to display any data. The elenent "node" in

"data": function(node) {....

Is just returning -1 (even though my firebug console shows all the data retrieved as above) and I'm not actually getting the data. I'm not really sure how this should be working...

Answer 1

Turns out I was just being an idiot. After getting the tree to actually load by downloading and manually copying jstree into my lib folder (instead of using the broken bower version), I just had to restructure my data on the server side before passing it to the jstree and viola!