Get value after right click in context menu PrimeFaces

Question

I created in my project context menu after right click. Menu model is created in Java. In XHTML I have only:

<p:panelMenu style="width:250px" id="menu"
            model="#{menuBean.menuModel}" stateful="false">
        </p:panelMenu>

<p:contextMenu id="context" for="menu"
                model="#{menuBean.contextMenuModel}" style="width:300px">

I want get value or id from item when I click on it right mouse click. How do this in PrimeFaces? I found answer only for using data table. I used in project JSF and PrimeFaces.

EDIT: I wrote simple jQuery like this:

$(".ui-menuitem-link").contextmenu(function() {
   document.getElementById("hiddenField").value = $(this).text();
});

It returns the name of selected item, but maybe someone have better solution without jQuery.

@YagamiLight When I try this I have error: `Unable to attach behavior to non-ClientBehaviorHolder parent` — DanteVoronoi, Dec 15 '16 at 12:23
that's good plead wait a second and i will provide an answer and try to explain it — Yagami Light, Dec 15 '16 at 12:24

Kukeltje · Answer 1 · 2016-12-15T14:52:50.267

The p:contextMenu has a beforeShow attribute that can be used to fire a client-side javascript function (as can be read in the documentation).

It also has a targetFilter, to only fire on certain elements within the 'for'. If you give your form an explicit id (e.g. myForm), you can have it fire only on the menu item links:

<p:contextMenu for="menu" targetFilter="#myForm\\:menu .ui-menuitem-link" beforeShow="...">

You can e.g. do a console.log(this) or a console.log(event) and from those check what you need and have access to, it is a lot.

'this' in the context of the contextMenu has a jqTarget property that will get you the html component the contextMenu was fired for (the menu), but you can also use the event object which has a target that is the specific menu item.

<p:contextMenu for="menu" targetFilter="#myForm\\:menu .ui-menuitem-link" beforeShow="console.log(this); console.log(event)">

Will give you an output like

Object { _super: undefined, cfg: Object, id: "myForm:j_idt118", jqId: "#myForm\:j_idt118", jq: Object, widgetVar: "widget_myForm_j_idt118", keyboardTarget: Object, links: Object, rootLinks: Object, jqTargetId: "#myForm\:menu", 1 meer… }  panelMenu.xhtml:655:174
Object { originalEvent: contextmenu, type: "contextmenu", isDefaultPrevented: returnFalse(), target: <a.ui-menuitem-link.ui-corner-all.ui-state-hover>, currentTarget: <div#myForm:menu.ui-panelmenu.ui-widget>, relatedTarget: null, timeStamp: 103942249, jQuery31004030775514688282: true, delegateTarget: HTMLDocument → panelMenu.xhtml, handleObj: Object, 1 meer… }

So you do need javascript to get to the real value of what you need, you just do not need custom jquery.

Since I do not know where your hidden field is, I cannot incorporate that in my answer. Sorry

I try method with hidden input and it's work well. Thanks for help. — DanteVoronoi, Dec 15 '16 at 15:02
are you saying my answer helped? Or are you using your jquery? If the answer helped, you are encouraged to 'accept' it. If it helped good, you can even upvote it. If it did not help at all, you can downvote the answer. Others then know this answer was not good — Kukeltje, Dec 15 '16 at 15:19
I am using my `JQuery` but I think your answer is good and can be helpful for someone who search solution of this problem. — DanteVoronoi, Dec 16 '16 at 08:38

score 1 · Answer 2 · answered Dec 15 '16 at 12:32

1

To perform something like that you first need to make your contextMenu inside the element and necessarily have something to identifie your data (information)

Let's look to this example

First Example : Tree

<p:tree id="tree"  value="#{ManagedBean.treeConstruct}" var="node" ...>
 <p:ajax  event="contextMenu"  listener="#{ManagedBean.onContextMenu}"     />
 ...    
</p:tree>

and in the managedBean you will found

 public void onContextMenu(NodeSelectEvent event) {

  System.out.println(" event " + event.getTreeNode().getRowKey());

 }

You can see the way that we get the selected element, this way is provided by Primefaces documentation.

Second Example : DataGrid

 <p:dataGrid var="car" ...>
  <p:contextMenu   for="element" id="test" >
   <p:menuitem  icon="ui-icon-plus" ... >
       <f:setPropertyActionListener value="#{car}"  target="#{ManagedBean.nodeSelected}"  />                                  
                            </p:menuitem>

  </p:contextMenu>
 </p:dataGrid>

You see that the thing Var is in commente with the two example

answered Dec 15 '16 at 12:32

Yagami Light

1,756
4
19
39

@DanteVoronoi wait i will improve my answer – Yagami Light Dec 15 '16 at 12:33
so it's impossible to do this in panel menu? – DanteVoronoi Dec 15 '16 at 12:36
@DanteVoronoi i am trying to give an answer about this question this is why i said "wait i will improve my answer" – Yagami Light Dec 15 '16 at 12:37
@DanteVoronoi did you see http://stackoverflow.com/questions/28591301/how-to-pass-javascript-variables-as-parameters-to-jsf-action-method – Yagami Light Dec 15 '16 at 12:44
I've send you to this post if your first goal is to send param from your javaScript to your managedBean – Yagami Light Dec 15 '16 at 12:44
I know how send param from JS to my Bean. But I can get only name selected menu item. But I want get id of this element , but in `JQuery` I cant do this because is not work well with dynamic created element. In this case I would rather do this in Java. – DanteVoronoi Dec 15 '16 at 12:49
thanks for answer but in this case I dont see other solution than using `JQuery` – DanteVoronoi Dec 15 '16 at 12:56
@Kukeltje i've tried to give informations about how contextMenu works that's not a complexe solution it's a minimal one to understand how it's work – Yagami Light Dec 15 '16 at 13:22

Get value after right click in context menu PrimeFaces

2 Answers2