Prevent js tree to reload on window.location = "url"

[SR]

Hello!

I´m using jsTree as a navigation component in a (SharePoint) app using angular js. To use angulars routing I set a href property on my <a> tag when rendering my tree. But because of that jsTree stops propagation and preventDefault, the links are not navigated to by the browser. So I use the changed.jstree event instead. This works as expected, as in: angular sees the new route in url and renders the correct template for me. But this changed.jstree event causes (of course) that the entire navigation tree to "reload". This is not a good user experience and I want somehow to prevent the tree to reload on every node click. Code so far:

//Init the tree

jQuery.jstree.defaults.core.expand_selected_onload = true;

            $('#leftNavTree').jstree({

                core: {multiple: false}

            });

 $("#leftNavTree").on('ready.jstree', function (event, data) {

                var instance = $("#leftNavTree").jstree(true);

                var m = instance._model.data;

                var currentNodeGuid = $route.current.params.itemId; //this is angular code, getting the current url/route

                  

                     //Setting the clicked node as selected in the tree

                    for (var i in m) {

                        if (m.hasOwnProperty(i) && i !== '#' && m[i].li_attr.name && m[i].li_attr.name === currentNodeGuid) {

                            instance.select_node(i);

                            break;

                        }

                    }

            });

$('#leftNavTree').on('changed.jstree', function (event, data) {

                var clickedNodeGuid = data.node.a_attr.name; // I have set a guid as name here when node renders

                if (clickedNodeGuid !== $route.current.params.itemId) {

                    window.location = '#/item/' + clickedNodeGuid;

                }

            });

So in short: when user clicks a node, new content is shown on the page but the entire navigation tree reloads. The content is shown instantly, so there are on page loads etc, just angular that switches (html)templates based on the route/url that I set/navigate to. Can I somehow keep my navigation tree as it is on click, instead of it is reloading (collapses and then expands to selected node again)? 

 Thanks.

[Ivan Bozhanov]

This is not a jstree specific issue - provided you only change the hash part of the URL (as I see you do) - the page will not reload and jstree will not refresh. Something else on your page is recreating the view (possibly the angular templates you mentioned). I am no expert on angular so I can't help you there, but this definitely is not a jstree issue.

Best regards,
Ivan

[SR]

Aha, yes you are probably right. I will investigate a bit more on that. Thanks for reply.