jsf PrimeFaces如何关闭模态表单答案

【问题标题】：jsf PrimeFaces how to close modal formjsf PrimeFaces如何关闭模态表单
【发布时间】：2023-03-13 08:28:02
【问题描述】：

我创建了一个模态表单。而提交按钮工作正常：

<p:commandButton ajax="false" value="save" action="#{editErReferencesFormWebBean.submit}" />

我不知道如何创建一个只关闭对话框的取消按钮。我不想为此调用服务器。有没有一种简单的方法来关闭对话框（并丢弃所有输入）？

【问题讨论】：

标签： javascript jsf primefaces

【解决方案1】：

阅读 Primefaces 文档：

    <p:dialog widgetVar="modal" modal="true" closable="false">
     <!-- Modal content -->
     <h:form id="form">
        <p:commandButton value="Cancel" onclick="PF('modal').hide();$('#form').trigger('reset');" type="button" />
      </h:form>
    </p:dialog>

另外，您可以将closable 属性设置为true 以显示关闭对话框的X 图标。

【讨论】：

OP 不想调用服务器。
可关闭是一个有效的选项。有没有办法为按钮获得相同的功能？
输入type="button"，按钮不会调用服务器。 PF('modal').hide(); 关闭模式，$('#form').trigger('reset'); 清除表单更改。
它正在工作我编辑了你的答案以澄清“#form”

【解决方案2】：

试试这个：

<h:form id="form">
    <h:panelGrid columns="1" cellpadding="5">
        <p:commandButton value="Modal" type="button" onclick="PF('dlg').show();" />
    </h:panelGrid>

    <p:dialog header="Modal Dialog" id="myDialog" widgetVar="dlg" modal="true" height="100">

        <h:outputText value="This is a Modal Dialog." />
        <p:inputText/>

        <button id="myButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" onclick="$('#form\\:myDialog').hide(); $('#form\\:myDialog_modal').remove();$('#form').trigger('reset');">
            <span class="ui-button-text ui-c">
                My Button
            </span>
        </button>

    </p:dialog>
</h:form>

问候。

【讨论】：

我试过了，但这不起作用。可能我通过替换“myDialog”做错了什么？您能否展示一个完整的示例（我对 jsf/primefaces 完全陌生）
用一个完整的例子更新我的答案，希望对你有所帮助。