jsf PrimeFaces如何关闭模式形式

Question

I created a modal form. while the submit button works fine:

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

I don't know how to create a cancel button that just closes the dialog. I don't want to call the server for it. Is there a simple way to just clos the dialog (and discard all inputs)?

Answer 1

Reading Primefaces documentation:

    <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>

Also, you could set closable attribute to true for displaying X icon which closes the dialog.

Answer 2

Try this:

<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>    

Regards.