CODEWITHSUNDEEP
jqueryjstree
Emilie
Emilie

Reputation: 403

How to refresh a jstree without triggering select_)node again

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?

Upvotes: 3

Views: 13344

Answers (5)

Cat
Cat

Reputation: 56

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

Upvotes: 2

Suketu Bhuta
Suketu Bhuta

Reputation: 2023

deselecting the nodes before refreshing the tree would work.

Upvotes: 2

Teja
Teja

Reputation: 1254

Or you can deselect all the nodes after refresh

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

This should work!

Upvotes: 2

AlexCV
AlexCV

Reputation: 516

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.

Upvotes: 1

Emilie
Emilie

Reputation: 403

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

Upvotes: 6

Related Questions