Hiding a context menu

[utdrew]

Hi,

I have a context menu that is shown upon rowclick in a data table. This part works great. However, because the location of the menu is the corner where the click occurred, the mouse may never enter the menu and thus the menu is left sitting on the screen. The user can mouse over and then out of the context menu to get it to disappear but I would like to do this automatically so I've tried the following:

<rich:contextMenu attached="false" id="menu" submitMode="ajax"
 hideDelay="10"
 onexpand="startMenuTimeout();"
 onmouseover="clearMenuTimeout();"
 oncollapse="clearMenuTimeout();"
 disableDefaultMenu="false"
 style="background-color:#f3f3f3;" >
 ...........................
</rich:contextMenu>

Here are the definitions of the JS functions:

var menuTimeout;
var menu;
function startMenuTimeout()
{
 menuTimeout=setTimeout("hideMenu()","500");
}
function hideMenu()
{
 var menu = jQuery("menu");
 menu.hide();
}
function clearMenuTimeout()
{
 clearTimeout(menuTimeout);
}

I've debugged this and the functions are getting called correctly but the 'hide()' method never actually hides the menu and the onmouseover event is never triggered so if 'hide()' did work correctly it would always get hidden 500 ms after being shown. Can anyone point to what I'm doing wrong here?

I'm using Richfaces 3.3.0 GA.

Thanks,

Drew

[nbelaevski]

Hello Drew,

Most likely the problem is caused by the fact that menu is not found by jQuery. Add:

alert(jQuery('menu').length)

to check that or use debugger.
Correct id selector should start with #, so you should use jQuery('#menu'), but still there is a problem. As id is output including ids of parent forms etc., the valid code is:

jQuery("\##{fn:replace(rich:clientId('menu'), ':', '\\:')}")

'fn:' prefix should be bound to http://java.sun.com/jsp/jstl/functions URI.

[utdrew]

Thanks for your help!

I ended up using a rich:jquery to take care of the id problem. Now it works and hides the popup but the popup no longer shows up unless I call a similar 'show' method in the onexpand. Any ideas about that?

In order to work around the fact that the onmouseover event doesn't ever fire on the context menu I added it to every menuItem. Is it a known issue that the onmouseover doesn't work on the context menu? If so, it seems like the documentation should be updated.

Thanks,

Drew

[nbelaevski]

Drew,

You've hidden menu element using hide() method for HTML element. Use JS API hide() method instead