Question

Started playing around with jQuery and the jsTree plugin yesterday, and have it successfully loading the tree with an AJAX call to a servlet. Now, I would like to have the tree open all the nodes after loading so I added a success function to the ajax attribute. However, I cannot seem to get the open_all() method to work properly. I’m very new to working with jQuery so I’m guessing it’s something simple that I’m doing wrong.

Firebug isn’t showing any errors which rules out the dumb error of mistyped method name. I checked the documentation and I think I’m doing everything correctly according to what I read. The tree is loading correctly, but not opening all the nodes after the page loads.

I’m using jQuery 1.4.2 and jsTree 1.0rc2 on Firefox 3.6.8.

Here’s the code I’m using to load the tree and attempt to open all the nodes in the tree:

// Create the tree object
$("td#modelXML").jstree({
    core : { "animation" : 0 },
    //xml_data : {"data" : "" + xml, "xsl" : "nest"},
    xml_data : {"ajax" : 
                    {"url" : "servlet/GetModelHierarchy", 
                    "type" : "post", "data" : { modelId : "" + modelId} }, 
                    "xsl" : "nest",
                    "success" : function(){
                                $(this).open_all(-1);
                                }
    },
    themes : {"theme" : "classic", "dots" : true, "icons" : true},
    types : { 
        "types" : {
            "category" : {
                "valid_children" : ["factor"]
            },
            "factor" : {
                "valid_children" : ["level"]
            },
            "level" : {
                "valid_children" : "none",
                "icon" : {
                    "image" : "${request.contextPath}/jsTree/file.png"
                }
            }
        }
    },
    plugins : ["themes", "types", "xml_data"]
});

Answer 1

You have to hook into the events, and then call open_all.

To have all nodes open on load, use:

    var tree = $("#id-or-selector-for-my-tree-element");
    tree.bind("loaded.jstree", function (event, data) {
        tree.jstree("open_all");
    });

Do the above, before you initialize the tree with .jstree({...}).

If you refresh it, then to have all nodes open again, you have to use:

    tree.bind("refresh.jstree", function (event, data) {
        tree.jstree("open_all");
    });