4

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>

1 Answer 1

4

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:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.