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

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

Answer 2

Yes, this is an old question, but with no accepted answer and having the only answer not being useful to me, here's my answer which I now use:

var tree = $("td#modelXML")
    .bind("loaded.jstree", function (e, data) {
        data.inst.open_all(-1); // -1 opens all nodes in the container
    })
    .jstree({ /* your jsTree options as normal */ });

The key point here is that data.inst is your jsTree, and is the only reference you will have available because tree won't have a value until .jstree({ finishes. Since loaded.jstree is called within the .jstree({ call, the result will not yet exist. See?

Answer 3

I was completely unable to get it to work either with tree.jstree('open_all') or data.inst.open_all(-1) - in the end I had to use data.instance.open_all() - notice the change from inst to instance, and open_all(-1) to just open_all() - both of those seem to be required with jQuery 1.11 and jstree 3.0.0. My final code block looks like this:

$(document).ready(function() {
    var tree = $('#jstree');
    tree.bind('loaded.jstree', function(event, data) {
        data.instance.open_all();   
    });
    tree.jstree({});
});

Answer 4

Try this!

$("td#modelXML").jstree("open_all","#nodeID");