「新規追加」ボタンのあるデータテーブルがあります。望ましいシナリオは次のとおりです。
- ボタンをクリックします
- ダイアログに表示されるフォームに入力します
- 検証が失敗した場合、ダイアログに検証メッセージを表示する
検証パス ダイアログを閉じ、成功メッセージを表示し、テーブルを更新します
現在のセットアップ 2 では動作しません
- データテーブルの更新
- 検証メッセージもデータテーブルの上に表示されますが、ダイアログの唯一の場所ではありません (すべてのメッセージの場所にあります - それは問題ありません) が、保存が成功した後、これらのメッセージはそこに残ります
ページ上部に表示されるメッセージ
<p:messages id="messages" autoUpdate="true" closable="true" escape="false"/>
私の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>
機能させるには何を変更すればよいですか?ありがとう。
編集 保存コマンドボタンの更新を変更することにより、メッセージの問題を解決しました
<p:commandButton
styleClass="primaryButton"
value="#{msg['button.save']}"
update="@form, @(:messages)"
action="#{qlookupListBean.save}"
oncomplete="if (args && !args.validationFailed) { newDialog.hide(); updateTable(); }" />
編集2 私は間違っていました。空のフォームで [保存] をクリックすると、以前の検証メッセージが消えます。非 ajax POST リクエストがサーバーで送信され、ページがリロードされ、ダイアログが表示されません。