How to clear out and reuse p:dialog when adding new items
10,395
Not only you need to recreate the model before the dialog is opened, but you also need to ajax-update the dialog's content before it's opened.
Here's a kickoff example:
<h:form id="form">
<p:dataTable id="table" value="#{bean.entities}" var="entity">
<p:column>#{entity.property1}</p:column>
<p:column>#{entity.property2}</p:column>
<p:column>#{entity.property3}</p:column>
...
</p:dataTable>
<p:commandButton value="Add" action="#{bean.add}"
update=":dialog" oncomplete="w_dialog.show()" />
</h:form>
<p:dialog id="dialog" widgetVar="w_dialog">
<h:form>
<p:inputText value="#{bean.entity.property1}" />
<p:inputText value="#{bean.entity.property2}" />
<p:inputText value="#{bean.entity.property3}" />
...
<p:commandButton value="Save" action="#{bean.save}"
update=":form:table" oncomplete="w_dialog.hide()" />
</h:form>
</p:dialog>
(note: form must go inside dialog, not outside!)
with this bean:
private List<Entity> entities; // +getter
private Entity entity; // +getter
@PostConstruct
public void init() {
entities = new ArrayList<>();
}
public void add() {
entity = new Entity();
}
public void save() {
entities.add(entity);
}
See also:
- How to show details of current row from p:dataTable in a p:dialog and update after save
- Creating master-detail table and dialog, how to reuse same dialog for create and edit
Related videos on Youtube
Comments
-
Surya over 1 year
I am using
<p:dialog>
to add a new row to<p:dataTable>
taking input from user, but I am unable to reset it. Everytime it shows data of previous input and instead of adding it's editing the current row. How do I clear the fields?<h:form id="foodTableForm"> <p:dataTable id="foodTableId" var="v" value="#{dashboardBean.myFoodList}" editable="true"> <p:ajax event="rowEdit" listener="#{dashboardBean.onEdit}" /> <p:ajax event="rowEditCancel" listener="#{dashboardBean.onCancel}" /> <p:column sortBy="#{v.project}" headerText="Project Name"> <p:cellEditor> <f:facet name="output"> <h:outputText value="#{v.project}" /> </f:facet> <f:facet name="input"> <p:inputTextvalue="#{v.project}"/> </f:facet> </p:cellEditor> </p:column> <p:column headerText="#{msg['product.label.edit']}"> <p:rowEditor /> </p:column> <p:column headerText="#{msg['product.label.delete']}"> <p:commandLink id="deleteFoodPromotion" actionListener="#{dashboardBean.deleteFoodPromotion(v)}" update="@form" /> </p:column> </p:dataTable> </h:form> <h:form id="dialogInputForm"> <p:dialog widgetVar="dlg"> <p:inputText id="firstname" value="#{dashboardBean.foodPromoDTO.project}" required="true" /> <p:calendar value="#{dashboardBean.foodPromoDTO.promoDate}" id="startDate" required="true" /> <h:selectOneMenu value="#{dashboardBean.foodPromoDTO.action}" required="true"> <f:selectItem itemLabel="Promo Start" itemValue="Promo Start" /> <f:selectItem itemLabel="Promo End" itemValue="Promo End" /> </h:selectOneMenu> <p:commandLink id="submitButton" value="Save" action="#{dashboardBean.addFoodPromotion}" update="@form" oncomplete="PF('dlg').hide();" /> </p:dialog> </h:form>