Context Menu not showing on right click

[WadeG]

Ivan, 

Great work on this plugin. I have realized most of my needs and am quite happy with how well it works.

I am stuck on the context menu though. It is not showing up when I right click on any nodes or leafs.

A bit of background:

• we don't have a lot of leafs or nodes, at most about 50, usually 20 or less
• we structure the data on the backend quite differently as we have many other needs for it and use a mapper on the front end to convert to the format jsTree prescribes
• the approach we are currently taking is to load it all in one go, let the user make changes and then "save" those changes all at once with a button click, at which time convert it back to the backend structure (I haven't finished this part yet)

Currently, the tree renders fine, opens all nodes on ready.jstree, dnd works very well and I have figured out the style and the root/node/leaf rules using the types (great work by the way). Only issue is right click and no context menu shows up, not even the default Chrome context menu. I also tried this in Safari with the same results. 

The code in the onRender of a Backbone.Marionette view:

onRender: function () {

Backbone.Validation.bind(this, {

forceUpdate: true

});

this.stickit();

var tree = this.$el.find('#treeviewData');

tree.on("ready.jstree", function (e, data) {

data.instance.open_all();

});

var data = fieldsAndWellsDataMapper.getTreeViewData(this.model.toJSON());

console.log("mapped data: ", JSON.stringify(data));

tree.jstree({

"core": {

"check_callback": true,

"animation": 0,

"themes": {

"icons": false,

"stripes": false,

"dots": false

},

'data': data

},

"types": {

"#": {

"valid_children": ["field"]

},

"field": {

"valid_children": ["section", "well"]

},

"section": {

"valid_children": ["section", "well"]

},

"well": {

"valid_children": []

}

},

"plugins": [

"themes", "contextmenu", "dnd", "types", "wholerow"

]

});

}, 

Here's an example of the 'data' I am setting above:

mapped data: [

{"id":"Hondo","text":"Hondo","type":"field","children":[{"id":"200_2-020-3-401003_47","text":"200/2-020-3-401003/47","type":"well"},{"id":"266_6-663-8-383838_38","text":"266/6-663-8-383838/38","type":"well"}]},

{"id":"Unwin","text":"Unwin","type":"field","children":[{"id":"299_9-999-9-999999_99","text":"299/9-999-9-999999/99","type":"well"}]}]

---

This e-mail communication is confidential and legally privileged. If you are not the intended recipient, please notify me at the telephone number shown above or by return e-mail and delete this communication and any copy immediately. Thank you.

[Ivan Bozhanov]

If the default menu does not show up either, then you probably have prevented it somewhere. I just tested and have no problem showing the menu.  Do you get any errors in the console?

[WadeG]

No errors in the console. When I omit the plugins "contextmenu" option, the default Chrome context menu comes back when right clicking on any node.

[WadeG]

I stepped through your source a bit. It is getting as far as this function: show: function (reference, position, data) {

It even hits a console statement I put in at the end of this function right before : vakata_context.is_visible = true;

Also, I your hide function just below show was never invoked.

[Ivan Bozhanov]

Sorry to make you do this, but I cannot reproduce:
Open your console and go to the document view ... Maybe there will already be a .vakata-context element right before the closing body - inspect it.
Then go ahead and right click a node - and look at the node again - maybe there is some CSS hiding the menu?
Or if it is "visible", but you cannot see it - maybe it appears behind something - try raising its z-index from the console. Sometimes libraries will fight for the highest z-index, you may need to sort the conflict manually (add a z-index in your css file).

Best regards,
Ivan

[WadeG]

Yeah, using Chrome debug tools and looking at the elments tab, I don't see any elements with "vakata". I also did a text search in that view with no luck. 

I think I will take the route of just adding buttons that the user clicks on to rename/create/delete unless you have any other ideas.

Thanks for your help!

Wade.

[Ivan Bozhanov]

Do you have this element?


If you don't maybe that is the root of the problem.

[Ivan Bozhanov]

17 април 2014, четвъртък, 23:01:41 UTC+3, Ivan Bozhanov написа:

Do you have this element?

[WadeG]

No, the <ul class="vakata-context and the <div id="jstree-marker are not present. I see other things jstree related of course.

[Ivan Bozhanov]

The marker will only be there if you use DND, but the contextmenu should be there. I am shooting in the dark here, but maybe you are removing elements from the body? Or emptying the body? Or maybe you have two body elements?

The contextmenu is added around line 4600 (.appendTo("body");) Maybe you can put a break point there and see if it is added? And if it is - from that moment on - go step by step and see what removes it, but it should not be jstree's code that removes it. If you can setup a demo it will be much quicker to debug. Anyway - you should see it added, and then just check what removes it.

Best regards,
Ivan

[WadeG]

YES! 

Both jstree and our implementation of Marionette were adding to the body element. I've changed our implementation to add to a div inside body and it all works now.

What do you think for future versions of this plugin to not do anything in document.ready and just append to the container element of the tree once jstree is invoked?

Thanks for all your help on this Ivan, much appreciated.

Wade.

[romyss...@gmail.com]

Hey guys,

I might have a similar problem. I use jsTree 3.0.8 and everything works fine as long as I use the jsTree div in the body. As soon as I put it into an absolute positioned div within the body, the context menu is shown above the actual window.

I checked the position with the show_contextmenu event and there the position is right (relative to the document). But I can't see it with Firefox and the debug shows me it's above the actual scope.

Looks like I'm messing it up with my CSS but I can't really see why... Are there any restrictions I'm not familiar with? Or is it just a stupid mistake I can't see?

Thanks for your assistance!

Here the code:

HTML:

<html>
<head>
<link rel="stylesheet" href="libs/jstree/dist/themes/default/style.min.css" />
<script src="libs/jquery/dist/jquery.js"></script>
<script src="libs/jstree/dist/jstree.min.js"></script>
<script src="libs/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
... /*JAVASCRIPT --> working*/
</script>
<link rel="stylesheet" type="text/css" href="framework.css"/>
</head>

<body>
 <div id="editBlock" class="frame">
  <div id="editorContainer">
   <h1>Editor</h1>
   <div id="editor"></div>
  </div>
  <div id="treeContainer">
   <h1>Repository</h1>
   <div id="jstree"></div>
  </div>
 </div>
 <div id="buttonBlock" class="frame">
  <button id="startButton" onClick="startWorker()" disabled>Start</button>
  <button id="stopButton" onClick="stopWorker()" disabled>Stop</button>
  <a id="downloadLink"></a>
 </div>
 <div id="outputBlock" class="frame">
  <h1>Output</h1>
  <iframe id="output"></iframe>
 </div>
</body>
</html>

CSS:

#editBlock    {
         position:    absolute;
         top:        0;
         left:        0;
         right:        0;
         height:    45%;
        }

#editorContainer {
         position:    absolute;
         top:        0;
         left:        0;
         right:        0;
         bottom:    0;
         margin-right:    300px;
        }

#editor        {
         position:    absolute;
         top:        40;
         bottom:    0;
         left:        0;
         right:        0;
        }

#treeContainer    {
         position:    absolute;
         top:        0;
         right:        0;
         bottom:    0;
         width:        300px;
         overflow:    auto;
        }

#buttonBlock    {
         position:    absolute;
         top:        45%;
         bottom:    50%;
         left:        0;   
         right:        0;
        }

#outputBlock    {
         position:    absolute;
         top:        50%;
         left:        0;
         right:        0;
         height:    45%;
        }

#output        {
         position:    absolute;
         left:        0;
         right:        0;
         width:        99%;
         height:    80%;
        }

[Ivan Bozhanov]

There must be some other body level rule, or general DIV rule - inspect the contextmenu div to see what rules it gets from your CSS.
Here is your exact code (with 3.0.9) and the contextmenu works fine:
http://jsfiddle.net/DGAF4/256/

Best regards,
Ivan

[romyss...@gmail.com]

Wow, awesome response time, thanks Ivan :)

I found this in the CSS debug:
<ul class="vakata-context jstree-contextmenu jstree-default-contextmenu" style="left: 491px; display: block; top: -170px;">

element {
    left: 491px;
    display: block;
    top: -170px;
}

The 491 is absolutely correct and the -170px explains the problem... But I can't find where this is defined/overruled.
Need to do a bit more research when I'm back home, probably the issue comes from the ace editor.

Thanks for the help, I really appreciate the support and jsTree is awesome! Will post the solution asap or come back with more info.
Cheers,
Cédric

[romyss...@gmail.com]

Hey guys,

I updated to the latest jstree version 3.0.9 ,digged a bit deeper and figured out that there is no CSS overruling the inline CSS written in jstree.contextmenu.js around line 483.
For a reason I still don't understand, the top value is set to -170px. As you proofed, it seems to work with the CSS I use for my div framework. The only difference between that code and the one I use is that in the editor div, I use an instance of the ace or codemirror editor (I tried both to make sure that there is no influence from a particular editor). Both showed the same issue, the context menu is drawn above the actual window. I even tried to disable the editor (commented out all CSS links & js scripts) without success. First, I thought the problem is that I load new content to the editor on the select event and that interferes with the context but the problem remains when I disable my code in the select event.
To be honest, I don't completely understand how the top value (line 462 onwards) is calculated. But, somehow my script seems to affect this value.
I tried to log the values used for the calculation but console.log did not work (does this run i a separate thread?). Sounds similar to the problem WadeG described but I don't see the issue yet. Would you mind sharing your thoughts around the code of jstree.contextmenu.js between line 462 and 482?

Thanks in advance for your inputs,
Cédric

[Ivan Bozhanov]

The only thing that could shift the menu up is the height calculation. The contextmenu helper will try to fit the menu on the page if you are too close to the bottom edge. So if for some reason $(window).height() + $(window).scrollTop() is less than the calculated position + the height of the generated menu, the menu will be shifted up just enough so that its bottom edge will be at the bottom of the screen. However for the menu to be rendered outside of the screen, there must be something wrong - like some case I did not predict. But that was not present in the code you gave me (if for example the window height is 0).
I can only help you further if I see a demo, sorry, but I have no idea how to reproduce this.

Best regards,
Ivan

[romyss...@gmail.com]

Hi Ivan,
Thanks for your answer and sorry for my late reply. I'm quite busy & on the road right now.

Ok, sounds about right. Still wondering why I can't console.log the values in jstree.contextmenu.js, I think this would explain a lot... anyway, I run this locally right now and because of quite a few dependencies it's a bit difficult to give you a demo in jsfiddle or thelike. Will try to upload it to a server asap in case I can't figure it out myself.
I already checked that x and y position are correct. Now, I quickly outputted $(window).height() and $(window).scrollTop() in the select event and it gives me:
Height: 8
scrollTop: 0

This explains the behavior. Now.... why the heck is height = 8?
Will take another look at it as soon as I'm back

Thanks again for your contribution! It's a real pleasure :)

Best regards,
Cédric

[romyss...@gmail.com]

Hi all,

Might have found the reason for this inconvenient issue:
http://bugs.jquery.com/ticket/12426
It was also mentioned here:
http://stackoverflow.com/questions/12937494/why-does-firefox-return-0-as-the-value-of-window-height

Unfortunately, adding the doctype (which I forget to be honest... still prototyping...) destroys the GUI completely... Seems like I have to investigate this even more detailed...
I'll let you know as soon as I got news.

Cheers,
Cédric

[romyss...@gmail.com]

YES! Got it :) The issue stated in my previous post was the problem:

<!DOCTYPE html> forces the browser to interpret the page in strict mode which initially lead to a few problems in my CSS. Once those were sorted out, the context menu works as it should and always did in other layouts. Why the trouble? jQuery does not support Quirks mode and needs a proper doctype declaration. Otherwise $(window).height() returns garbage and in the end, lead to the issue that the context menu was displayed above the screen.
To conclude: My bad.....
Hope the quick explanation helps in case others (as dumb as I....) face the same problem.

Sorry for the inconveniences but THANKS for kicking me into the right direction! :) Much appreciate your support! It's great to see that you stay behind your code and keep this project alive. Thank you!

Best regards,
Cédric

[Ivan Bozhanov]

Glad to see you worked it out :)

Best regards,
Ivan

[Dheeraj Kumar]

Hi Guys , 

i am facing similar issue. i am not able to see any context menu while i click on only node in tree.

i am using latest jstree and creating it as below 

 

$('#GEOjstree').jstree({

            'core': {

                'data': JsonGeographyStructure,

                'check_callback': true,

                'plugins': ['state', 'contextmenu']

                }

            

        });

below is screen shot while i was right clicking on node

please help 

thank you 

Dheeraj Kumar