Bug with state Plugins, some node are freeze after reload

[DimoJTN]

Hi, i currently use JStree V3.0.2.

When i expand some nodes, and refresh the page, some nodes are frozen and no action is possible on those nodes. After another refresh the nodes who were frozen are now closed and then everything is fine.

Here is my javascript for JStree :

    $("#jstree_demo").jstree({
        'core': {
            'data': {
                'url': function (node) {
                    return node.id === '#' ?
                      appBaseUrl + '/asset/gettreedatalazy' :
                      appBaseUrl + '/asset/gettreedatalazy/' + node.id;
                },
            },
            "check_callback": true
        },
        plugins: ["contextmenu", "wholerow", "state"], contextmenu: { items: customMenu },
    }).bind("select_node.jstree", function (e, _data) {
        if (_selectedNodeId === _data.node.id) {
            _data.instance.deselect_node(_data.node);
            _selectedNodeId = "";
        } else {
            _selectedNodeId = _data.node.id;
        }

    }).bind("dblclick.jstree", function (e) {
        console.log(e);
        var node = $(e.target).closest("li");
        $("#jstree_demo").jstree("toggle_node", node);
    })

And here is my JSON result when the bug append :

http://localhost/1/demo/asset/gettreedatalazy

[{"id":"7ddb0045-8ac8-42a0-9aa3-be022fb6c902","text":"A1 - Asset 1","children":true,"a_attr":{"title":"A1 - Asset 1"}},{"id":"67b14025-b47f-467f-96aa-f929f365bdc5","text":"A2 - asset2","children":true,"a_attr":{"title":"A2 - asset2"}},{"id":"4783921c-d0e9-41d5-9957-5f9320cc5f10","text":"A3 - Asset 3","children":false,"a_attr":{"title":"A3 - Asset 3"}}]

http://localhost/1/demo/asset/gettreedatalazy/7ddb0045-8ac8-42a0-9aa3-be022fb6c902

[{"id":"e529af55-014d-49f1-aee6-d78b8979f68d","text":"A1.2 - A1.2","children":false,"a_attr":{"title":"A1.2 - A1.2"}},{"id":"aaa72bb8-ef5b-45af-aa55-5984232d2ce8","text":"A1-1 - A1-1","children":false,"a_attr":{"title":"A1-1 - A1-1"}}]

http://localhost/1/demo/asset/gettreedatalazy/67b14025-b47f-467f-96aa-f929f365bdc5

[{"id":"1b6e4d3d-2f0f-458b-b91a-9e089c2d8735","text":"A2.1 - A2.1","children":false,"a_attr":{"title":"A2.1 - A2.1"}},{"id":"a95fe947-6450-4960-b84e-0c90be7a382e","text":"A2.2 - A2.2","children":false,"a_attr":{"title":"A2.2 - A2.2"}}]

And here is my Html generated:

<div id="jstree_demo" class="jstree jstree-1 jstree-default" role="tree" aria-activedescendant="7ddb0045-8ac8-42a0-9aa3-be022fb6c902">
<ul class="jstree-container-ul jstree-children jstree-wholerow-ul jstree-no-dots">
<li id="7ddb0045-8ac8-42a0-9aa3-be022fb6c902" class="jstree-node jstree-open" role="treeitem" aria-expanded="true" aria-selected="false">
<div class="jstree-wholerow" unselectable="on"> </div>
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#" title="A1 - Asset 1">
<i class="jstree-icon jstree-themeicon"></i>
A1 - Asset 1
</a>
<ul class="jstree-children" role="group">
<li id="e529af55-014d-49f1-aee6-d78b8979f68d" class="jstree-node jstree-leaf" role="treeitem">
<div class="jstree-wholerow" unselectable="on"> </div>
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#" title="A1.2 - A1.2">
<i class="jstree-icon jstree-themeicon"></i>
A1.2 - A1.2
</a>
</li>
<li id="aaa72bb8-ef5b-45af-aa55-5984232d2ce8" class="jstree-node jstree-leaf jstree-last" role="treeitem">
<div class="jstree-wholerow" unselectable="on"> </div>
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#" title="A1-1 - A1-1">
<i class="jstree-icon jstree-themeicon"></i>
A1-1 - A1-1
</a>
</li>
</ul>
</li>
<li id="67b14025-b47f-467f-96aa-f929f365bdc5" class="jstree-node jstree-open" role="treeitem" aria-selected="false" aria-expanded="true">
<div class="jstree-wholerow" unselectable="on"> </div>
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#" title="A2 - asset2">
<i class="jstree-icon jstree-themeicon"></i>
A2 - asset2
</a>
<ul class="jstree-children" role="group" style="">
<li id="1b6e4d3d-2f0f-458b-b91a-9e089c2d8735" class="jstree-node jstree-leaf" role="treeitem">
<div class="jstree-wholerow" unselectable="on"> </div>
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#" title="A2.1 - A2.1">
<i class="jstree-icon jstree-themeicon"></i>
A2.1 - A2.1
</a>
</li>
<li id="a95fe947-6450-4960-b84e-0c90be7a382e" class="jstree-node jstree-leaf jstree-last" role="treeitem">
<div class="jstree-wholerow" unselectable="on"> </div>
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#" title="A2.2 - A2.2">
<i class="jstree-icon jstree-themeicon"></i>
A2.2 - A2.2
</a>
</li>
</ul>
</li>
<li id="4783921c-d0e9-41d5-9957-5f9320cc5f10" class="jstree-node jstree-leaf jstree-last" role="treeitem" aria-selected="true">
<div class="jstree-wholerow" unselectable="on"> </div>
<i class="jstree-icon jstree-ocl"></i>
<a class="jstree-anchor" href="#" title="A3 - Asset 3">
<i class="jstree-icon jstree-themeicon"></i>
A3 - Asset 3
</a>
</li>
</ul>
</div>

[vakata]

I see absolutely no problem: http://jsfiddle.net/DGAF4/25/ - do you have the issue here? One thing you may be missing - did you check the console for errors - maybe _selectedNodeId is undefined and you get a js error (hence the "freeze").

[DimoJTN]

In JsFiddle i don't have the issue. There were not js error in the console.

We did further more research, apparantly, the bug appears in 3.0.1 and 3.0.2. We took the last version availaible in Github, and then the problem is solved.