Call perffaces context menu from java script
I have svg in my webpage. Items when right-clicked should display a context menu with data retrieved from the database. The elements are written in such a way that the right click event triggers the js function on the page. And I need to call the context menu from a java script. Can someone please help me with this. I have been stuck on this issue for almost 3 days. Element:
<rect/><text>L</text></g><g id="118" onmousedown="RightClickExecute(event,118)">
java script:
function RightClickExecute(event, id) {
if (event.button == 2) {document.getElementById("myForm:selectedEntityid").value = id;
document.getElementById("myForm:selectedObjectType").value = 'Entity';
document.getElementById("myForm:RightAction").click();
}
}
function showContextMenu(){
document.getElementById("myForm:contextMenuItemId").click();
}
XHTML:
<p:contextMenu id="contextMenuId" for="svgContainerPanel"
widgetVar="contextMenuVar" rendered="#{myBean.objectType=='Entity' ? true : false}">
<p:menuitem id="contextMenuItemId" ></p:menuitem>
</p:contextMenu>
<p:contextMenu event="click" id="contextMenu2Id" for="contextMenuId"
widgetVar="contextMenu2Var" model="#{my.model}" >
</p:contextMenu>
<p:commandButton id="RightAction" style="visibility:hidden"
action="#{myBean.populateMenu}" ajax="true"
type="submit" oncomplete="showContextMenu()"
update="contextMenuId,contextMenu2Id">
</p:commandButton>
<h:inputHidden id="selectedEntityid"
value="#{myBean.selectedEntityId}">
</h:inputHidden>
<h:inputHidden id="selectedObjectType"
value="#{myBean.objectType}">
</h:inputHidden>
source to share
The mainMenu GUI has no way to get it, so you can use jquery to do that. If you want to show the contextMenu, you need to change the position of the contextMenu to the mouse position (default page load context, but it has css display: none, so you need to change the css). Primefaces contextMenu has a widgetvar attribute for use in the client (its method shows to show it).
Primefaces contextMenu
has an attribute widgetvar
for use in the client (its method shows to show it).
For example, you show a context menu when the mouse hovers over a component that has an id rongnk
, I have a form (id: form), contextmenu (id: xxx)
<script type="text/javascript">
//<![CDATA[
$(document).on('mouseover', '#form\\:rongnk', function(e) {
$(PrimeFaces.escapeClientId('form:xxx')).css({
top: e.pageY+'px',
left: e.pageX+'px'
}).show();
});
//]]>
</script>
source to share