Show row data from datatable in dialog in JSF
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>