模态对话框BUG [英] Modal dialogs BUG

问题描述

我有此代码，当前正在工作:

I have this code, currently working:

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:p="http://primefaces.org/ui"
   template="/templates/default.xhtml">

    <ui:define name="content">

        <h:form id="form">     

            <p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">

                <p:column headerText="Ragione sociale">
                    <h:outputText value="#{c.ragioneSociale}" />
                </p:column>
                <p:column headerText="Codice fiscale">
                    <h:outputText value="#{c.codiceFiscale}" />
                </p:column>

                <p:column style="width:4%">
                    <p:commandButton 
                        update=":formDialog:clienteEditDialog" 
                        oncomplete="clienteEditDialog.show()" 
                        value="Modifica"
                        title="Modifica">
                            <f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
                    </p:commandButton>
                </p:column>

            </p:dataTable>        

            <p:commandButton 
                value="Aggiorna" 
                actionListener="#{clientiController.aggiorna}" 
                update=":form:clienti" 
                icon="ui-icon-arrowrefresh-1-n" />

            <p:commandButton 
                value="Nuovo Cliente" 
                actionListener="#{clientiController.nuovo}" 
                update=":formDialog:clienteEditDialog" 
                oncomplete="clienteEditDialog.show()" />

        </h:form>       

        <h:form id="formDialog">

            <p:dialog 
                header="Modifica Cliente" 
                widgetVar="clienteEditDialog" 
                id="clienteEditDialog"
                showEffect="fade" 
                hideEffect="explode" 
                closable="true">

                    <h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">

                        <p:outputLabel for="fieldNome" value="Ragione Sociale:" />
                        <p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />

                        <p:outputLabel for="fieldCodice" value="Codice:" />
                        <p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />


                    </h:panelGrid>

                    <p:commandButton 
                        value="Conferma modifiche" 
                        actionListener="#{clientiController.modifica}" 
                        update=":form:clienti" 
                        oncomplete="clienteEditDialog.hide()"
                        rendered="#{clientiController.clienteSelezionato.id!=null}" />

                    <p:commandButton 
                        value="Conferma nuovo cliente" 
                        actionListener="#{clientiController.crea}" 
                        update=":form:clienti" 
                        oncomplete="clienteEditDialog.hide()"
                        rendered="#{clientiController.clienteSelezionato.id==null}" />


            </p:dialog>

        </h:form>

    </ui:define>

</ui:composition>

现在，我真的希望我的对话框是模式对话框，所以我将 modal = true 添加到了我的对话框中.

Now I'd really like my dialog to be modal, so I add modal=true to my .

结果是我的对话框出现在叠加层下方".

The result is my dialog appears "under" the overlay.

经过一番搜索，我发现 appendToBody = true 可以解决我的问题，所以我尝试了一下，对话框以正确的方式出现.

After a bit searching, I found that appendToBody=true would solve my problem, so I try it and my dialog appears the right way.

但是... WTF ??！对话框中的按钮停止工作！！

But... WTF??! Buttons inside the dialog stop working!!

BUG?还是有什么解决办法?

BUG? Or is there any solution?

推荐答案

在对话框内移动<h:form id="formDialog">

因为使用appendToBody=true时，对话框的内容会附加到页面的BODY上...而且在这种情况下，对话框的内容位于h:form之外，并且您知道commandButtons必须位于h:form为了工作....

Because when you use appendToBody=true the content of the dialog being appended to the BODY of your page... And in you case its being taken outside the h:form and as you know commandButtons must reside within a h:form in order to work....

喜欢

<p:dialog appendToBody="true".....
       <h:form id="formDialog">
           .....

使用dialogs时，请记住将h:forms放置在对话框中...

When working with dialogs allays remember to place your h:forms inside the dialog...

这篇关于模态对话框BUG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！