Show row data from datatable in dialog in JSF

Question

I have a simple CRUD application written in JSF 2.2 and PrimeFaces 3.5. The database consists of two tables - Clients and Orders. I have a view with datatable where all clients are listed and in the last column are three buttons - for eidt, delete and showing the orders for each client. When edit button is clicked the data for the selected client should be loaded in a modal dialog form but no matter which button is pressed in the dialog always is loaded data for the client in the first row. Same for the delete button.

Here is the code of the view:

<h:form id="form">

    <p:growl id="msgs" showDetail="true" />

    <p:commandButton id="addNewClientButton" type="button"
        onclick="add.show();" value="Add new client"
        action="clientBeans.newClient" />
    <br />

    <p:dataTable var="client" value="#{clientBeans.getAllClients()}"
        border="true">
        <p:column headerText="Client Id">
            <h:outputText value="#{client.clientId}" />
        </p:column>
        <p:column headerText="Name">
            <h:outputText value="#{client.name}" />
        </p:column>
        <p:column headerText="Address">
            <h:outputText value="#{client.address}" />
        </p:column>
        <p:column headerText="Email">
            <h:outputText value="#{client.email}" />
        </p:column>
        <p:column headerText="Options">
            <p:commandButton value="Edit" id="editClientButton"
                action="#{clientBeans.editClient}" type="button"
                update=":form:editClient" onclick="edit.show();">
                <f:setPropertyActionListener 
                                      target="#{clientBeans.client}"
                    value="#{client}" />
            </p:commandButton>
            <p:commandButton action="#{clientBeans.deleteClient}"                              
                                   value="Delete"
                id="deleteClientButton" type="button"             
                                    onclick="remove.show();"
                icon="ui-icon-circle-close">
                <f:setPropertyActionListener
                    target="#{clientBeans.client.clientId}" 
                            value="#{client}" />
            </p:commandButton>
            <p:commandButton
               action="#orderBeans.getSpecificOrders(client.clientId)}"
                value="Orders">
                <f:setPropertyActionListener
                    target="#{clientBeans.client.clientId}" 
                 value="#{client.clientId}" />
            </p:commandButton>
        </p:column>
    </p:dataTable>
</h:form>

<h:form>
    <p:dialog id="addNewClient" header="Add new client" widgetVar="add"
        modal="true" resizable="false">
        <p:panelGrid columns="2" border="false">
            <h:outputLabel for="name" value="Name: " />
            <p:inputText id="name" value="#{clientBeans.client.name}"
                label="name" required="true" />

            <h:outputLabel for="address" value="Address: " />
            <p:inputText id="address" 
                        value="#{clientBeans.client.address}"
                label="address" required="true" />

            <h:outputLabel for="email" value="Email: " />
            <p:inputText id="email" value="#{clientBeans.client.email}"
                label="email" required="true" />

            <f:facet name="footer">
                <p:commandButton 
                        action="#{clientBeans.createClient}" value="Save"
                    icon="ui-icon-check" style="margin:0">  
                             </p:commandButton>
            </f:facet>
        </p:panelGrid>
    </p:dialog>
</h:form>

<h:form>
    <p:dialog id="editClient" header="Edit client" widgetVar="edit"
        modal="true" resizable="false">
        <h:panelGrid columns="2" id="displayClient">
            <h:outputLabel for="id" value="Id: " />
        <h:outputText id="id" value="#{client.clientId}" label="id" />

            <h:outputLabel for="name" value="Name: " />
            <p:inputText id="name" value="#{client.name}" label="name"
                required="true" />

            <h:outputLabel for="address" value="Address: " />
        <p:inputText id="address" value="#{client.address}" label="address"
                required="true" />

            <h:outputLabel for="email" value="Email: " />
        <p:inputText id="email" value="#{client.email}" label="email"
                required="true" />

            <f:facet name="footer">
                <p:commandButton 
                        action="#{clientBeans.updateClient}" value="Save"
                    icon="ui-icon-check" style="margin:0"> 
                           </p:commandButton>
            </f:facet>
        </h:panelGrid>
    </p:dialog>
</h:form>

<h:form>
    <p:dialog id="deleteClient"
        header="Are you sure you want to delete this client?"
        widgetVar="remove" modal="true" resizable="false">
        <p:panelGrid columns="2">
            <h:outputLabel for="id" value="Id: " />
        <h:outputText id="id" value="#{client.clientId}" label="id" />

            <h:outputLabel for="name" value="Name: " />
        <h:outputText id="name" value="#{client.name}" label="name" />

            <h:outputLabel for="address" value="Address: " />
    <h:outputText id="address" value="#{client.address}" label="address" />

            <h:outputLabel for="email" value="Email: " />
    <h:outputText id="email" value="#{client.email}" label="email" />

            <f:facet name="footer">
        <p:commandButton action="#{clientBeans.confirmDeleteClient}"
                value="Delete" icon="ui-icon-circle-close" />
            </f:facet>
        </p:panelGrid>
    </p:dialog>
</h:form>

Answer 1

I haven't gone through all the code, but I could quickly spot that you have misused <p:commandButton> : the attribute type="button" should only be used for invoking custom JavaScript (client) code, it is therefore not compatible with action and actionListener , that are suitable for invoking server actions. Remove this attribute and ensure that the managed beans's method #{clientBeans.editClient} is invoked.

Look at PrimeFaces documentation, commandButtons with type="button" are called "Push Buttons".

Second, use oncomplete instead of onclick , in order to show the dialog after the ajax method has completed its job .