How to refresh a jstree without triggering select_)node again

Question

I'm using the jstree plugin, with an ajax call. At some point, I call

$("#tree").jstree("refresh");

in order to retrieve the new nodes that were created through an ajax call. This works well, with the exception that select_node.jstree gets triggered on the refresh. Is there a way to prevent select_node from being triggered on a tree refresh?

Solution 1

I ended up using setting a flag to true before refreshing, and in the select_node event trigger, only executing the logic if the flag is set to false, otherwise setting it back to false and doing nothing else:

refresh = true;
$("#tree").jstree("refresh");

[...]

$("#tree").jstree({...}).bind("select_node.jstree", function (e, data) {
    if (refresh) {
        refresh = false;
    } else {
       // do my thing
    }
 });

Solution 2

Or you can deselect all the nodes after refresh

refresh=true;
$("#tree").jstree("refresh");
$("#tree").jstree("deselect_all");

This should work!

Solution 3

deselecting the nodes before refreshing the tree would work.

Solution 4

The problem with a bool is that select_node.jstree will be triggered for each childnode if the currently selected node has children.

Instead, there are two parameters in the refresh-function. The second one can be a bool or a function that receives a state object with a core.selected array with all visible nodes. If you empty the array and return the state, select_node.jstree will not be triggered at all.

        var tree = $('#mytree').jstree(true); 

        tree.refresh(false, function (state) {
            //console.dir(state);
            state.core.selected = [];
            return state;
        });

Solution 5

If you are using the UI plugin, the refresh() function "Enables saving the selection state before the refresh and restoring it afterwards". So, if the current selected node (before refresh) is a child of the node to be refreshed, it's state will be restored after refresh by triggering the reselect() function. The refresh function locks like this:

refresh : function (obj) {
            var _this = this;
            this.save_opened();
            if(!obj) { obj = -1; }
            obj = this._get_node(obj);
            if(!obj) { obj = -1; }
            if(obj !== -1) { obj.children("UL").remove(); }
            else { this.get_container_ul().empty(); }
            this.load_node(obj, function () { 
                _this.__callback({ "obj" : obj}); 
                _this.reload_nodes(); //this will trigger the reselect() function
            });

I had the same problem and I commented that line(_this.reload_nodes()). Don't think it is a optimal solution, but solved my problem.

View more solutions

Comments

[Benny Bottema]

jstree nowadays has a method redraw which suits this purpose.