How to show a dialog after the user select a row of a <p:datatable>?

Question

I have this datatable:

<h:form id="form">
<p:dataTable id="tblInfo" var="ref" value="#{consultasBean.listaRefacciones}" paginator="true" rows="10" selectionMode="single" selection="#{consultasBean.refaccionSeleccionada}" rowKey="#{ref.idRefaccion}">
       <p:column headerText="Equipo">
          <h:outputText value="#{ref.equipo}" />
       </p:column>
       <p:column headerText="Marca">
          <h:outputText value="#{ref.marca}" />
       </p:column>
       //More colums here...
</p:dataTable>

And I want to show this dialog after the user select a row:

<p:dialog id="myDialog" widgetVar="refaccionDialog" header="Detalle Refaccion" resizable="false" width="300" showEffect="explode" hideEffect="explode">
     <h:panelGrid id="display" columns="2" cellpadding="4">
          <h:outputText value="Info:" />
          <h:outputText value="#{consultasBean.refaccionSeleccionada.equipo}" />
     </h:panelGrid>
     //More things here...
 </p:dialog>

And this is part of my bean (viewscoped):

private List<RefaccionBean> listaRefacciones = null;
private RefaccionBean refaccionSeleccionada = null;
// setters and getters...

listaRefacciones already has info, so dont worry about how it gets it.

I know i have to use p:ajax but just dont know how.

I was checking this (example 1 is what i want) but the info is too old and does not work now.

Please help me.

Answer 1

Just include ap:ajax inside your table

<p:ajax event="rowSelect" oncomplete="PF('refaccionDialog').show()" update=":dialogId" />

Hope this helps.

Answer 2

rowKey attribute of datatable is wrongly written. it should be like as follows

  rowKey="#{ref.idRefaccion}"

The datatable code should as follows

   <h:form id="form">
   <p:dataTable id="tblInfo" var="ref" value="#{consultasBean.listaRefacciones}" paginator="true" rows="10" selectionMode="single"
      selection="#{consultasBean.refaccionSeleccionada}" rowKey="#{ref.idRefaccion}">
   <p:column headerText="Equipo">
      <h:outputText value="#{ref.equipo}" />
   </p:column>
   <p:column headerText="Marca">
      <h:outputText value="#{ref.marca}" />
   </p:column>
   //More colums here...
   </p:dataTable>