So I am using JSTree in my Django project and I am experiencing some unexpected behavior when retrieving the state.
Before I explain what the issue is, I want to introduce how I intend to use the JSTree. So I have a menu on the left side of my main page, which always stays there. The JSTree is located in this menu and functions like an explorer, giving the user an interface to navigate through the objects displayed, just like folders in e.g. windows explorer. When the user (for instance) adds new objects (that are displayed in the JSTree), he is returned to the main page, where the JSTree is destroyed and reinitialized (thats the current implementation, I might opt to change it in the future tho). My desired behavior would be, that the JSTree keeps its state, so if the user decides to add/delete/edit an object, he does not have to open the folder structure again, to reach the point where he was before.
Currently, everything expect restoring the state is working properly. Although, there is a scenario, where it behaves as expect. There are two different scenarios:
1.) When I am on the main page and refresh the page in my browser, the JSTree restores the state as expected, which is great.
2.) When I click on the Logo on the top menu (which hrefs the user to the main page, in whichs html the tree script is located), the tree does only restore the state of top-level objects. So every objects that were opened below top level will be closed, which seems kind of odd, since in the local storage, the value of the jstree seems to be the state the tree should be in, but in fact it is not. I guess it is having trouble retrieving the state from the local storage?
As far as I understand, the behavior should be the same in both scenarios, since its basically just running the script in my html either way, so I am unable to explain this behavior.
My script looks like this:
<script>
function formatData(data) {
var formattedData = [];
data.forEach(function (node) {
var formattedNode = {
'id': node.id,
'text': node.text,
'state': node.state,
'data': node.data,
'children': formatData(node.children || []) // Recursively format the children
};
formattedData.push(formattedNode);
});
return formattedData;
}
$.getScript("{% static 'cabinets/node_modules/jstree/dist/jstree.min.js' %}")
.done(function() {
function initJSTREE() {
var jstreeElement = $('#jstree_global');
jstreeElement.jstree('destroy');
jstreeElement
.on('select_node.jstree', function(e, data) {
if (data.selected.length) {
partialNavigation.setLocation(data.instance.get_node(data.selected[0]).data.href);
}
})
.jstree({
'core': {
'data': function(node, callback) {
$.ajax({
'url': "{% url 'common:jstreerefreshview' %}",
'dataType': 'json',
'success': function(data) {
console.log('Data collected: ', data);
callback.call(this, formatData(data));
}
});
},
'themes': {
'responsive': true
},
'check_callback': true
},
'plugins': ['state']
});
}
initJSTREE();
})
.fail(function(jqxhr, settings, exception) {
console.error('Error loading jstree.min.js:', exception);
});
</script>
When the jstree.min.js is loaded, the jstree is destroyed and reinitialized (I also tried redraw and refresh, but this will not update the tree data).
I am looking forward to any ideas or suggestions,
Thank you in advance!