Jstree show context menu conditionally

Question

This code below shows my attempt to show a jstree context menu only at level 1.

The menu shows at level one and selection of the menu items shows an alert. The menu does not show at level 2 which is fine and what I want.

But, after selecting a level 2 node, then selecting a level 1 node the menu appears as it should, but selection of the menu items does nothing.

Any help appreciated.

fiddle: https://jsfiddle.net/NervousElk/4p5hqg0r/17/ fiddle

document.getElementById("gobtn").addEventListener("click", buildtree);

function buildtree()
{               
        $('#ttstafftree').jstree(
        {           
        plugins: ["wholerow",  "json_data", "ui", "themes", "sort", "state",  "contextmenu"], 
        'core' : 
            {                                   
                "check_callback": true,                 
                'data' : 
                    [
                    { "id" : "ajson1", "parent" : "#", "text" : "Root 1" },
                    { "id" : "ajson1-1", "parent" : "ajson1", "text" : "a" },                       
                    { "id" : "ajson2", "parent" : "#", "text" : "Root 2" },
                    { "id" : "ajson2-1", "parent" : "ajson2", "text" : "b" },                       
                    ]
            },

            "contextmenu": 
            {                                                                               
                "items": 
                {
                  opt1: 
                  {
                    label: "opt 1",                     
                    action: function(data) 
                    {
                     alert('opt 1')                      
                    }                                                                                       
                  },

                  opt2: 
                  {
                    label: "opt 2",
                    action: function(data) 
                    {
                     alert('opt 2')                      
                    }                                                                           
                  }                                                                               
                }                
            },                      
        })  

        .on('show_contextmenu.jstree', function(e, reference, element) 
        {                           
            if ( reference.node.parents.length != 1) 
            {                             
               $('.vakata-context').remove();                          
            }

        });      
}

Answer 1

You're removing the vakata-context element to hide the context menu for leaf nodes. Although I'm not too certain of this, to me it seems that this breaks the event handlers set on the context menu so they don't work anymore. Looking at the source code for the context menu, jsTree internally uses $.vakata.context.hide() to hide the tree. You could use that in your event handler for the show_contextmenu.jstree event.

.on('show_contextmenu.jstree', function (e, reference, element) {
      if (reference.node.parents.length != 1) {
          $.vakata.context.hide();
          //$('.vakata-context').css('display',"none");
      }
});