jsTree state plugin causes page to reload continuously

[Keith Myers]

I have spent a number of hours trying to figure this out and I'm just not getting anywhere. Adding the state plugin causes ie, chrome and firefox to reload the page over and over. Any attempt to manipulate the tree (close or open nodes) will have an effect for a split second, then the state gets reset when the page reloads. The reloading happens even if I don't manipulate the tree. Any help would be greatly appreciated.

    $('#NavTreeContainer').jstree({
        'core': {
            'themes': {
                'name': 'default',
                'responsive': true,
                'stripes': true,
                'dots': true,
                'icons': false
            }
        },
        'state' : { 'key' : 'navTree' },
        'plugins' : [ 'state' ]
    }).on('select_node.jstree', function(e, data) {
        document.location = data.instance.get_node(data.node, true).children('a').attr('href');
    });
    $('#ExpandAllNavTreeButton').click(function() {
        $('#NavTreeContainer').jstree('open_all');
    });
    $('#CollapseAllNavTreeButton').click(function() {
        $('#NavTreeContainer').jstree('close_all');
    });

[Ivan Bozhanov]

Yes, that is normal - it is not the state plugin that is causing the refresh, it is your code - when it reacts to the select_node event. Before redirecting make sure the state has been reapplied and then react. To make it simple - get the latest code from github and use this:

$('#NavTreeContainer').jstree({
        'core': {
            'themes': {
                'name': 'default',
                'responsive': true,
                'stripes': true,
                'dots': true,
                'icons': false
            }
        },
        'state' : { 'key' : 'navTree' },
        'plugins' : [ 'state' ]

    }).on('state_ready.jstree', function() {
        $('#NavTreeContainer').on('select_node.jstree', function(e, data) {

            document.location = data.instance.get_node(data.node, true).children('a').attr('href');
        });
    });
    $('#ExpandAllNavTreeButton').click(function() {
        $('#NavTreeContainer').jstree('open_all');
    });
    $('#CollapseAllNavTreeButton').click(function() {
        $('#NavTreeContainer').jstree('close_all');
    });

Keep in mind you absolutely need the latest version from here: https://github.com/vakata/jstree/archive/master.zip
The above code will not work with 3.0.8

Best regards,
Ivan

[Mohamed Abdelaziz]

This solution is not working as well.
Nothing happens when clicking nodes with this code, although I have downloaded the latest version from the attached link.

Is there an easy way to have the links work as old versions?

[Ivan Bozhanov]

Here is the above code simplified:
http://jsfiddle.net/DGAF4/250/

Aside from the config it has 4 lines of code - I don't think it can get any easier.

Try selecting a node - it will select and alert "1"
Click "Run" again - notice the node will be selected, but there will be no alert.
Click another node - since this time it was a result of user interaction - once again "1" will be alerted.

Substitute alert with changing the window location.

If that is too complicated for you try this code:
http://jsfiddle.net/DGAF4/251/

.on("select_node.jstree", function (e, data) {
  if(data.event) {
    // redirect user
  }
})

Once again - the alert (redirect) will happen only if the select_node is a result of user interaction.

Pick whichever method you want, but rest assured - they work, as can be seen by the two demos.

Best regards,
Ivan

[Mohamed Abdelaziz]

Great!

I used the first code and it works well now, thanks!

[Ashcon Abae]

I am also having the exact same issue with the state plugin! I will post my code so that you could take a look and tell me how I can fix the page from continuously reloading:

(function ($) {
 Drupal.behaviors.jstree_menu = {
  attach: function (context, settings) {
   
   var params = {};
   
   try {
    Drupal.jstree_menu.variables.theme = Drupal.jstree_menu.removeDoubleQuotes(settings.jstree_menu.theme);
    Drupal.jstree_menu.variables.rem_border = Drupal.jstree_menu.removeDoubleQuotes(settings.jstree_menu.rem_border);
   }
   catch (err) {
    // Default values if something goes wrong.
    Drupal.jstree_menu.variables.theme = 'default';
    Drupal.jstree_menu.variables.rem_border = 0;
   }
   
   if (Drupal.jstree_menu.variables.theme == 'proton') {
    params = {
     'core': {
      'themes': {
       'name': Drupal.jstree_menu.variables.theme,
       'icons':true,
       'responsive':true
      }
     },
     'state': {
      'key': 'navigation'
     },
     'search': {
      'fuzzy': true
     },
     'plugins': [
      'search', 'state'//, 'checkbox'
     ]
    };
   }
   
   
   $('[id^=menu-jstree-]').jstree(params);
   
   document.getElementById("btn").onclick = function()
   {
    var str = document.getElementById("search_ay").value;
    $('[id^=menu-jstree-]').jstree(true).search(str);
   };
   
   document.getElementById("search_ay").onkeyup = function()
   {
    var str = this.value;
    $('[id^=menu-jstree-]').jstree(true).search(str);
   };
   
   if (Drupal.jstree_menu.variables.rem_border == 1) {
    $('[id^=menu-jstree-]').addClass('rem-border');
   }
  }
 };
})(jQuery);

jQuery(document).ready(function() {
  // When a link is clicked, we redirect to href.
  jQuery('[id^=menu-jstree-]').on("select_node.jstree", function (e, data) {

    document.location = data.instance.get_node(data.node, true).children('a').attr('href');

 /*var href = data.node.a_attr.href;
    document.location.href = href;*/
  });
});

Also, could you please elaborate as to what you mean in your post when you say "Substitute alert with changing the window location"? This is how I understood that:

The original code from the first fiddle was

$('#jstree').jstree({
    core : {
        data : [
            { "id" : "1", "parent" : "#", "text" : "children" },
            { "id" : "2", "parent" : "1", "text" : "children 2" }
        ],

    },
    plugins : ['state']
}).on('state_ready.jstree', function() {

        $('#jstree').on('select_node.jstree', function(e, data) {
            alert(1);
        });
    });

,

and instead, you would like us to change it to this so that it runs the state plugin correctly:

$('#jstree').jstree({
    core : {
        data : [
            { "id" : "1", "parent" : "#", "text" : "children" },
            { "id" : "2", "parent" : "1", "text" : "children 2" }
        ],

    },
    plugins : ['state']
}).on('state_ready.jstree', function() {

        $('#jstree').on('select_node.jstree', function(e, data) {
            //alert(1);

[Ashcon Abae]

I got the answer from a different post, thanks! In case anyone needs more guidance like I did, I simply went to the bottom of that chunk of code I posted to the jQuery(document).ready method and changed it to this:

jQuery(document).ready(function() {
 // When a link is clicked, we redirect to href.
 jQuery('[id^=menu-jstree-]').on("select_node.jstree", function (e, data) {

  if (data.event)

   document.location = data.instance.get_node(data.node, true).children('a').attr('href');

 data.instance.deselect_node(data.node);

 /*var href = data.node.a_attr.href;
    document.location.href = href;*/
 });
})