CODEWITHSUNDEEP
javascriptxhtmlcontextmenu
Adarsh
Adarsh

Reputation: 3641

invoke primefaces context menu from java script

i have a svg on my webpage. The elements when right clicked on should display a context menu with data fetched from the database. The elements are written in such a way that the right click event triggers a js function on the page. And i need to invoke the context menu from the java script. Can someone please help me with this. I have been stuck with this issue for almost 3 days. The 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>

Upvotes: 3

Views: 2663

Answers (1)

Rong Nguyen
Rong Nguyen

Reputation: 4189

Primefaces's contextMenu doesn't have option to get that, so you can use jquery to do that. If you want to show contextMenu, you have to change contextMenu's position to Mouse's position(page load contextMenu by default, but it have css display:none, so you need change css). Primefaces's contextMenu have widgetvar attribute to use in client(it have method show to show it).

Primefaces's contextMenu have widgetvar attribute to use in client(it have method show to show it).

for example, you show contextmenu when mouse hover to a component, that have id is rongnk, i have a form(id:form), a 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>

Upvotes: 3

Related Questions