Why i get previous data in dialog using primefaces? - jsf

Question

i don't know why i get previous data when i use dialog that i call it from datatable, when i open the dialog and leave required field empty and press edit when i close the dialog and open another row i notice that the old data is appear in the fields
here's my code
<h:form id="content" prependId="false">
<c:set target="#{facilityMB}" property="facilityType" value="Recreation"/>
<h:panelGrid class="ipmagix-mainFrom" cellpadding="0" cellspacing="0" columns="1">
<h:panelGroup layout="block" class="ipmagix-breadcrumb">
<ul class="breadcrumb">
<li>Home <span class="divider">/</span></li>
<li>Services <span class="divider">/</span></li>
<li class="active">Recreation Promotion</li>
</ul>
</h:panelGroup>
<h:panelGroup layout="block" class="panel panel-primary">
<h:panelGroup layout="block" class="panel-heading">
<i class="icon-white icon-list"></i>
<i></i>
<h:outputText value="#{bundle.facilityRecreationList}"/>
</h:panelGroup>
<h:panelGroup layout="block" class="panel-body">
<p:messages id="messagesForList" showDetail="false" autoUpdate="false" closable="true"/>
<h:panelGroup layout="block" class="ipmagix-list-width" id="facilityListForm">
<ui:include src="facility-view.xhtml"/>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup layout="block" class="panel panel-primary">
<h:panelGroup layout="block" class="panel-heading">
<i class="icon-white icon-plus"></i>
<i></i>
<h:outputText value="#{bundle.facilityRecreationAdd}" />
</h:panelGroup>
<h:panelGroup layout="block" class="panel-body">
<p:messages id="messages" showDetail="false" autoUpdate="false" closable="true"/>
<h:panelGroup layout="block" class="ipmagix-form-width form-horizontal" id="facilityAddForm">
<div class="control-group">
<h:outputLabel for="facilityName" class="control-label" value="#{bundle.name}"></h:outputLabel>
<div class="controls">
<p:inputText value="#{facilityMB.facilityName}" id="facilityName" maxlength="40" required="true" requiredMessage="#{validation.emptyName}" />
<p:watermark value="#{bundle.name}" for="facilityName"/>
</div>
</div>
<div class="control-group">
<h:outputLabel for="language" class="control-label" value="#{bundle.language}"></h:outputLabel>
<div class="controls">
<p:selectOneMenu id="language" value="#{facilityMB.languageId}">
<f:selectItems value="#{facilityMB.languageList}" var="lang" itemValue="#{lang.languageID}" itemLabel="#{lang.languageName}" />
</p:selectOneMenu>
</div>
</div>
<div class="control-group">
<h:outputLabel for="facilityDesc" class="control-label" value="#{bundle.description}"></h:outputLabel>
<div class="controls">
<p:inputTextarea value="#{facilityMB.facilityDesc}" id="facilityDesc" maxlength="100" style="width: 80%" autoResize="false" rows="3" required="true" requiredMessage="#{validation.emptyDescription}" />
<p:watermark value="#{bundle.description}" for="facilityDesc"/>
</div>
</div>
<h:panelGroup layout="block" id="uploader" class="control-group">
<h:outputLabel class="control-label" value="#{bundle.imageURL}"></h:outputLabel>
<div class="controls">
<p:fileUpload fileUploadListener="#{facilityMB.handleFileUpload}" mode="advanced"
update="uploader, messages" auto="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
</div>
</h:panelGroup>
<div class="control-group well well-small">
<p:commandButton id="saveFacility" value="#{bundle.save}" styleClass="btn btn-mini btn-primary" icon="ui-icon-plus" action="#{facilityMB.saveFacility()}"
oncomplete="filter();" update ="facilityAddForm, facilityListForm, messages">
</p:commandButton>
</div>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</h:panelGrid>
<h:panelGroup layout="block" id="uiBlock">
<p:blockUI block="facilityListForm" trigger="saveFacility" >
LOADING<br />
<p:graphicImage value="#{resource['images:ajax-loader.gif']}"/>
</p:blockUI>
<p:blockUI block="facilityAddForm" trigger="saveFacility" >
LOADING<br />
<p:graphicImage value="#{resource['images:ajax-loader.gif']}"/>
</p:blockUI>
</h:panelGroup>
</h:form>
<h:form id="dialogForm" prependId="false">
<p:dialog id="dialog" modal="true" width="80%" resizable="false" header="Edit Special Promotion" widgetVar="dlg" dynamic="true">
<p:ajax event="close" update=":content:facilityListForm" />
<h:panelGroup layout="block" id="dialogContent">
<ui:include src="facility-edit.xhtml"/>
</h:panelGroup>
</p:dialog>
</h:form>
</ui:define>
and this is view page is be included
<p:dataTable widgetVar="tableVar" id="facilityDataTable" scrollWidth="100%" value="#{facilityMB.facilityList}" var="facility" paginator="true" editable="true" emptyMessage="#{bundle.emptyData}" rows="5" filteredValue="#{facilityMB.facilityFilterList}" >
<p:column headerText="Image" width="100">
<p:lightBox height="100">
<h:outputLink value="#">
<img src="#{facility.imageURL}" width="100" height="100"/>
</h:outputLink>
<f:facet name="inline">
<img src="#{facility.imageURL}" width="500" height="500"/>
</f:facet>
</p:lightBox>
</p:column>
<p:column headerText="#{bundle.name}" sortBy="#{facility.facilityName}" filterBy="#{facility.facilityName}" rendered="#{facilityMB.facilityType != 'Special Promotion'}">
<p:cellEditor >
<f:facet name="output">
<h:outputText id="ink" value="#{facility.facilityName}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{facility.facilityName}" maxlength="40" required="true" requiredMessage="The name is not valid"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="5%" headerText="#{bundle.language}" sortBy="#{facility.languageID.languageName}" filterBy="#{facility.languageID.languageName}">
<h:outputText value="#{facility.languageID.languageName}"/>
</p:column>
<p:column headerText="#{bundle.description}" sortBy="#{facility.facilityDescription}" filterBy="#{facility.facilityDescription}" rendered="#{facilityMB.facilityType != 'Special Promotion'}">
<p:cellEditor >
<f:facet name="output">
<h:outputText value="#{facility.facilityDescription}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{facility.facilityDescription}" maxlength="100" required="true" requiredMessage="The description is not valid"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="2%">
<p:commandLink styleClass="ui-icon ui-icon-trash" immediate="true"
oncomplete="filter()" action="#{facilityMB.deleteFacility(facility)}" update=":content:facilityDataTable, :content:messagesForList">
</p:commandLink>
</p:column>
<p:column width="4%">
<p:commandButton id="basic" value="Edit" immediate="true" action="#{facilityMB.prepareEdit(facility)}" oncomplete="dlg.show();filter();" update=":dialogForm:dialogContent" >
<f:setPropertyActionListener target="#{facilityMB.selectedFacility}" value="#{facility}"/>
</p:commandButton>
</p:column>
</p:dataTable>

Answer 1

Do not keep p:dialog inside h:form, instead keep h:form inside p:dialog.
Then you can update the h:form or any h:panelGroup inside p:dialog.
If you want to do it from Javascript use loadContents() function on p:dialog's widgetWar object.
For Example:
<h:form id="form1">
<p:commandButton update=":form2" oncomplete="myDialogWidget.loadContents()"/>
</h:form>
<p:dialog widgetWar="myDialogWidget" appendToBody="true">
<h:form id="form2">
....
</h:form>
</p:dialog>

Answer 2

Use update=":dialogForm" on edit command button. So whenever you open dialogbox, previous data will get refreshed.