Why doesn't jsTree open_all() work for me?

seneyr picture seneyr · Aug 27, 2010 · Viewed 20.3k times · Source

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

John Mills picture John Mills · Sep 10, 2010

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");
    });