Can a p:ajax component be used with p:outputLabel?

Question

I have a p:dataTable with some columns that contain p:outputLabel components. I want to add p:ajax functionality so that if the user clicks on the outputLabel, I can call a server-side process to do some stuff - in the simple case it would gather some information and display that in a dialog.

I'm looking for something like this

  <p:outputLabel value="#{term.explanation}" >
      <p:ajax event="click" listener="#{backingBean.myListener}" />
  </p:outputLabel>

Obviously, this doesn't work, so I was wondering if someone might be able to give me a hint on how I can get something like this. The constraint is that the dataTable needs to keep the p:outputLabel components - just need some way to ajaxify them.

Thanks in advance. Dave J.

@Kukeltje sorry.. I see your comment just now. I was already writing my answer. — Jasper de Vries, Sep 30 '16 at 07:14
No problem. Am not able to write a full answer the coming days. 3 days of golfing in Delden. Only access to/on my mobile phone. So only short comments (as usual ;-)) — Kukeltje, Sep 30 '16 at 08:03
Couldn't get the remote command to work in the context of a datatable column, but the command link option works. Thanks for the feedback. — DJarz, Oct 04 '16 at 14:12

score 0 · Accepted Answer · answered Sep 30 '16 at 00:28

0

Try to use

<p:commandLink actionListener="#{backingBean.myListener}"">
       <p:outputLabel value="#{term.explanation}" > </p:outputLabel>
</p:commandLink>

answered Sep 30 '16 at 00:28

Christian

827
6
14

This will add a link (and its style and behavior) to your HTML – Jasper de Vries Sep 30 '16 at 07:12
This does the job if you add style="text-decoration: none" to suppress the underline. – DJarz Oct 04 '16 at 14:13

score 0 · Answer 2 · edited May 23 '17 at 10:34

You could use p:remoteCommand here. You can use it to execute backing bean methods using JavaScript. For example:

<p:remoteCommand name="onLabelClick"
                 actionListener="#{backingBean.myListener}"/>
<p:outputLabel value="#{term.explanation}"
               onclick="onLabelClick()"/>

If you need to be able to know the specific p:outputLabel that was clicked you can add parameters to p:remoteCommand and use #{component.clientId} as the value.

Can a p:ajax component be used with p:outputLabel?

2 Answers2