我正在研究JSF / Primefaces应用程序。我想阻止在primefaces对话框后面的页面。我试过这段代码:
<h:form id="form">
<p:dataTable id="types" value="#{resourcesTypesMBean.resourceTypes}" var="item"
selection="#{resourcesTypesMBean.selectedResourceType}"
rowKey="#{item.id}" selectionMode="single">
<f:facet name="header" >
<table style="border: hidden">
<tbody >
<tr >
<td align="left" style="border: hidden">
<p:outputLabel value="List of Resources' Types"/>
</td>
<td align="right" style="border: hidden">
<p:commandButton
oncomplete="ResourceTypeDialogNew.show()"
icon="ui-icon-plus" title="add"/>
<p:commandButton id="btnDelete" title="delete
" actionListener="#{resourcesTypesMBean.deleteResourceType()}"
update="types" icon="ui-icon-trash" />
<p:button outcome="Resources.xhtml"
icon="ui-icon-arrowthick-1-w" title="back"/>
</td>
</tr>
</tbody>
</table>
</f:facet>
<p:column headerText="Name">
<p:outputLabel value="#{item.name}"/>
</p:column>
<p:column headerText="Code">
<p:outputLabel value="#{item.code}"/>
</p:column>
</p:dataTable>
</h:form>
<h:form id="newResourceTypeForm">
<p:dialog header="New Resource Type" widgetVar="ResourceTypeDialogNew"
resizable="false" modal="true" appendTo="@(body)" showEffect="explode"
hideEffect="explode" style="position: absolute ;"
id="dialogNewResourceType">
<p:panel id="panel">
<p:messages id="messages" />
<p:panelGrid id="newResourceType" columns="2" style="margin-bottom:10px">
<f:facet name="header">
<p:graphicImage value="/images/resource.png"/>
</f:facet>
<p:outputLabel value="Name" for="name"/>
<p:inputText id="name" value="#{resourcesTypesMBean.name}"
required="true" requiredMessage="The Name field is required." />
<p:outputLabel value="Code" for="code"/>
<p:inputText id="code" value="#{resourcesTypesMBean.code}"
required="true" requiredMessage="The Code field is required." />
</p:panelGrid>
<div align="right" >
<p:commandButton value="Save" style="margin-right: 5px" icon="ui-
icon-circle-check" oncomplete=" handleSubmitRequest(xhr, status,
args, 'ResourceTypeDialogNew','newResourceTypeForm');"
actionListener="#{resourcesTypesMBean.addResourceType()}"
update=":form:types, :growl" />
<p:commandButton value="Cancel"
oncomplete="ResourceTypeDialogNew.hide();"
icon="ui-icon-arrowrefresh-1-n" styleClass="ui-priority-primary"/>
</div>
</p:panel>
</p:dialog>
</h:form>
当显示对话框时,后面的页面被阻止,但save
和cancel
按钮无法正常工作,用户将自动从应用程序注销。
我需要你的帮助。
更新:没有modal="true" appendTo="@(body)"
它正常工作(save
和cancel
按钮)。
答案 0 :(得分:6)
现在无法检查解决方案的生命周期,但以下内容看起来很可疑:
当您检查渲染的XHTML代码时(例如通过Firefox中的Firebug),您可能会发现newResourceTypeForm
形式实际上是空的。使用appendTo="@body", I guess, the dialog panel is attached directly to the
body` - 元素,并且通过它在任何公式之外。这可以防止按钮内部工作。
p:dialog
或appendTo
appendTo="@form"
希望其中一个可以帮助你前进,如果 - 赞成赞赏 - ......