Search code examples
jsfprimefacesdialogcommandlinkprimefaces-datatable

JSF invoke dialog from commandLink/ajax


I'm able to invoke dialog from commandlink using ajax (present inside a dataTable).

Requirement- The row(commandlink) I click on, dialog should show the clicked row's value.

Issue- f:setPropertyActionListener & commandLink's action method is called after the dialog is shown. This results in old data being shown in dialog. By old data, I mean data from previous click.

Question- How do I invoke the dialog, only after f:setPropertyActionListener & commandLink's action method have finished executing?

Code-

<h:form id="form">

<p:outputPanel id="OPPanel">    
   <p:panel header="Panel Display">                
       <p:dataTable value="#{myBean.myDataList}" var="emp">
           <p:column headerText="myData1">
               <h:outputText value="#{emp.myData1}"/>
           </p:column>

           <p:column headerText="myData2">     
               <p:commandLink action="#{myActionClass.customizeData}" immediate="true">
                   <f:setPropertyActionListener value="#{emp.myData1}"
                       target="#{myBean.myData1Str}" />
                   <p:ajax event="click" update=":form:OPDialog"
                       oncomplete="PF('opDialogVar').show()"/>
                   <h:outputText value="#{emp.myData2}"/>
               </p:commandLink>
           </p:column>
       </p:dataTable>  
   </p:panel>
</p:outputPanel>

<p:dialog header="Custom Dialog Display" widgetVar="opDialogVar" modal="true" showEffect="fade"
     hideEffect="fade" resizable="false">
   <p:outputPanel id="OPDialog" style="text-align:center;">
       <p:panelGrid columns="2" 
                    columnClasses="label,value">

           <h:outputText value="Customized Data:"/>
           <h:outputText value="#{myBean.myData1Str}"/>

       </p:panelGrid>
   </p:outputPanel>
</p:dialog>
</h:form>

Attaching a sample picture

P.S-

  1. I'm aware that dialog can also be invoked from inside java code. But i want to do it this way.
  2. I tried adding process="@this" global="false" to p:ajax, but that didn't change the behaviour/output.
  3. I don't want to pass the clicked row's value, directly to dialog (if something like that is possible). When I click on commandlink, first the f:setPropertyActionListener & commandLink's action method should complete. Then only dialog should show, with the latest value.

Any help/feedback on this is hugely appreciated :)


Solution

  • Got the solution from this link- Primefaces' commandLink works only on the first page of a dataTable

    Modifying the solution in my context, below is my working code-

    <p:column headerText="myData2">     
       <p:commandLink 
           action="#{myActionClass.customizeData}" 
           oncomplete="PF('opDialogVar').show()"
           update=":form:OPDialog"
           immediate="true" process="@this">
           <f:setPropertyActionListener value="#{emp.myData1}"
               target="#{myBean.myData1Str}" />
           <h:outputText value="#{emp.myData2}"/>
       </p:commandLink>
    </p:column>
    

    I had read somewhere, that ajax is a part of commandlink. Now I truly understand what it means. Cheers