I have datatable with button "add new". Desired scenario is:
- Click on the button
- Fill in the form which is dispalyed in the dialog
- When validation fails show validation messages in the dialog When
- validation pass close the dialog, show success message and update
table
With current setup 2 thing dont work
- Updating the datatable
- Validation messages are also displayed above the datatable, not onlu in the dialog (in the place for all messages - thats ok) but after successfull save, these messages stays there
Messages displaying on top of the page
<p:messages id="messages" autoUpdate="true" closable="true" escape="false"/>
My XHTML:
<h:form id="lookupTableForm">
<p:dataTable
id="lookupTable"
widgetVar="lookupTable"
var="lookup"
value="#{qlookupListBean.lookups}"
styleClass="listBlock"
lazy="true"
rows="20"
paginator="true"
paginatorAlwaysVisible="false"
sortBy="#{lookup.name}"
sortOrder="ascending"
rowsPerPageTemplate="20,100,500">
<f:facet name="header">#{msg['integrations.tabs.qlookup.title']}</f:facet>
<p:column headerText="#{msg['qloookup.name']}"
sortBy="#{lookup.name}">
<h:outputText value="#{lookup.name}" />
</p:column>
<p:column headerText="#{msg['qloookup.type.in']}"
sortBy="#{lookup.typeIn}">
<h:outputText value="#{lookup.typeIn}" />
</p:column>
<p:column headerText="#{msg['qloookup.value.in']}"
sortBy="#{lookup.valueIn}">
<h:outputText value="#{lookup.valueIn}" />
</p:column>
<p:column headerText="#{msg['qloookup.type.out']}"
sortBy="#{lookup.typeOut}">
<h:outputText value="#{lookup.typeOut}" />
</p:column>
<p:column headerText="#{msg['qloookup.value.out']}"
sortBy="#{lookup.valueOut}">
<h:outputText value="#{lookup.valueOut}" />
</p:column>
<f:facet name="footer">
<div class="reset"></div>
<p:commandButton
onclick="newDialog.show()"
value="#{msg['qloookup.table.button.new']}"
styleClass="primaryButton" />
</f:facet>
</p:dataTable>
</h:form>
<p:dialog
id="newDialog"
header="#{msg['qloookup.new.title']}"
closable="true"
modal="true"
position="top"
resizable="false"
width="430"
height="400"
onShow="finFwUI.setDialogPosition()"
widgetVar="newDialog" styleClass="passwordDialog">
<h:form>
<h:panelGrid columns="2" styleClass="w30">
<p:outputLabel for="name"
value="#{msg['qloookup.new.name']}" />
<p:inputText id="name"
value="#{qlookupListBean.lookup.name}"
required="true"
styleClass="w30">
<f:validateLength minimum="1" maximum="35" />
</p:inputText>
<h:outputText value="" />
<p:message for="name" display="text" />
<p:outputLabel for="inType"
value="#{msg['qloookup.type.in']}" />
<p:selectOneMenu
id="inType"
value="#{qlookupListBean.lookup.typeIn}"
required="true"
filter="true"
filterMatchMode="contains"
styleClass="w30">
<f:selectItems
value="#{qlookupListBean.qualifierTypes}"
var="type"
itemLabel="#{type.type}"
itemValue="#{type.type}" />
<p:ajax event="change"
listener="#{qlookupListBean.reloadInValues}"
update="inValues" />
</p:selectOneMenu>
<h:outputText value="" />
<p:message for="inType" display="text" />
<p:outputLabel for="inValues"
value="#{msg['qloookup.type.in']}" />
<p:selectOneMenu
id="inValues"
value="#{qlookupListBean.lookup.valueIn}"
required="true"
filter="#{qlookupListBean.inValues.size() gt 8}"
filterMatchMode="contains"
styleClass="w30">
<f:selectItems
value="#{qlookupListBean.inValues}"
var="type"
itemLabel="#{type.value}"
itemValue="#{type.value}" />
</p:selectOneMenu>
<h:outputText value="" />
<p:message for="inValues" display="text" />
<p:outputLabel for="key"
value="#{msg['qloookup.key']}" />
<p:inputText id="key"
value="#{qlookupListBean.lookup.key}"
required="true"
styleClass="w30">
<f:validateLength minimum="1" maximum="35" />
</p:inputText>
<h:outputText value="" />
<p:message for="key" display="text" />
<p:outputLabel for="outType"
value="#{msg['qloookup.type.out']}" />
<p:selectOneMenu
id="outType"
value="#{qlookupListBean.lookup.typeOut}"
required="true"
filter="true"
filterMatchMode="contains"
styleClass="w30">
<f:selectItems
value="#{qlookupListBean.qualifierTypes}"
var="type"
itemLabel="#{type.type}"
itemValue="#{type.type}" />
<p:ajax event="change"
listener="#{qlookupListBean.reloadOutValues}"
update="outValues" />
</p:selectOneMenu>
<h:outputText value="" />
<p:message for="outType" display="text" />
<p:outputLabel for="outValues"
value="#{msg['qloookup.value.out']}" />
<p:selectOneMenu
id="outValues"
value="#{qlookupListBean.lookup.valueOut}"
required="true"
filter="#{qlookupListBean.outValues.size() gt 8}"
filterMatchMode="contains"
styleClass="w30">
<f:selectItems
value="#{qlookupListBean.outValues}"
var="type"
itemLabel="#{type.value}"
itemValue="#{type.value}" />
</p:selectOneMenu>
<h:outputText value="" />
<p:message for="outValues" display="text" />
<p:outputLabel for="value"
value="#{msg['qloookup.value']}" />
<p:inputText id="value"
value="#{qlookupListBean.lookup.value}"
required="true"
styleClass="w30">
<f:validateLength minimum="1" maximum="70" />
</p:inputText>
<h:outputText value="" />
<p:message for="value" display="text" />
<p:outputLabel for="description"
value="#{msg['qloookup.description']}" />
<p:inputTextarea id="description"
value="#{qlookupListBean.lookup.description}"
styleClass="w30">
<f:validateLength maximum="255" />
</p:inputTextarea>
<h:outputText value="" />
<p:message for="description" display="text" />
</h:panelGrid>
<div class="buttonsBlock">
<p:commandButton
styleClass="primaryButton"
value="#{msg['button.save']}"
update="@form"
action="#{qlookupListBean.save}"
oncomplete="if (args && !args.validationFailed) { newDialog.hide(); updateTable(); }" /><!-- see http://stackoverflow.com/a/9195852/204950 -->
<p:commandButton
value="#{msg['button.cancel']}"
styleClass="buttonRight"
onclick="newDialog.hide();"
immediate="true" />
<p:remoteCommand name="updateTable" update="@(lookupTableForm:lookupTable)" />
</div>
</h:form>
</p:dialog>
What should i change to get it work? Thanks.
EDIT Resolved the messages issue by modifying update on save command button
<p:commandButton
styleClass="primaryButton"
value="#{msg['button.save']}"
update="@form, @(:messages)"
action="#{qlookupListBean.save}"
oncomplete="if (args && !args.validationFailed) { newDialog.hide(); updateTable(); }" />
EDIT 2 I was wrong. Validation messages disapears with previous but now when i click save on empty form. Non ajax POST request is send on the server, page is reloaded and dialog is not shown.
