jsf-2 - JSF 对话框未打开

Question

好的，伙计们，我有一个问题：我的面板和 ajax 行为突然停止工作。他们跑得很好，但突然停下来工作。在我的 JSF 页面中，我有一个对话框面板（confirmPanel、newPanel），它必须在 commandButtons（btnNew、btnExclude）的单击事件上打开。这是 JSF 页面的代码。

    <ui:define name="content">
        <f:view>
            <h:form id="frmPublico">
                <p:panelGrid columns="2" styleClass="ui-main-div">
                    <f:facet name="header">
                        <p:panelGrid columns="2">
                            <p:commandButton id="btnNew" value="Novo" onclick="wvNew.show();" type="button"/>
                        </p:panelGrid>
                    </f:facet>
                    <p:growl id="gGlobalMsgs" globalOnly="true" redisplay="false"/>
                    <p:dataTable id="dtPublico" value="#{publicoBean.lstDataTablePublico}" 
                             var="publico" paginator="true" rows="#{publicoBean.maximoLinhasTablePublico}" 
                             paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                             rowsPerPageTemplate="5,10" >

                        <f:facet name="header">
                            Públicos
                        </f:facet>
                        <p:column>
                            <p:commandButton type="button" id="btnEdit" image="ui-icon-pencil" /> 
                        </p:column>
                        <p:column>
                            <p:commandButton type="button" id="btnExclude" image="ui-icon-circle-close" onclick="wvConfirm.show()" /> 
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                Nome
                            </f:facet>
                            <h:outputText value="#{publico.nmePublico}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                Tipo de público
                            </f:facet>
                            <h:outputText value="#{publico.tdTipoPublico}"  />
                        </p:column>

                        <f:facet name="footer">
                            Públicos
                        </f:facet>
                    </p:dataTable>

                    <f:facet name="footer">

                    </f:facet>
                </p:panelGrid>

                <!-- Caixas de diálogos -->
                <p:dialog id="dialogNovo" header="Novo público" widgetVar="wvNew" modal="true" appendToBody="false" >
                    <p:panelGrid columns="1">

                        <p:panelGrid columns="2" id="pnlNovoPublico">
                            <!-- Cabeçalho do grid -->
                            <f:facet name="header">
                                <!-- <p:messages id="info"/> -->
                                Cadastrar público
                            </f:facet>

                            <!-- Linha 1 -->
                            <h:outputLabel for="txtNomePublico" value="*Nome:"/>
                            <p:inputText id="txtNomePublico" value="#{publicoBean.nome}" required="true" requiredMessage="Digite o nome do público." />
                            <p:message for="txtNomePublico" redisplay="false" id="msgNomePublico" />

                            <!-- Linha 2 -->
                            <h:outputLabel for="ddlTipoPublico" value="*Tipo de público:"/>
                            <p:selectOneMenu id="ddlTipoPublico" value="#{publicoBean.tipoPublicoSelecionado}" effect="fade" 
                                         converter="#{publicoBean.conversor}" 
                                         required="true" requiredMessage="Selecione um tipo de público."> 
                                <f:selectItem itemLabel="Selecione um item..." itemValue=""/>
                                <f:selectItems value="#{publicoBean.lstMenuTipoPublico}" var="pt" itemLabel="#{pt.label}" itemValue="#{pt}"></f:selectItems>
                        </p:selectOneMenu>
                            <p:message for="ddlTipoPublico" redisplay="false" id="msgDdlTipoPublico" />

                        <!-- Rodapé do grid -->
                            <f:facet name="footer">
                                <p:commandButton actionListener="#{publicoBean.cadastrarPublico}" value="Cadastrar" icon="ui-icon-check" ajax="true" update="pnlNovoPublico, msgGlobal"/>
                            </f:facet>
                        </p:panelGrid>
                    </p:panelGrid>
                </p:dialog>

                <!-- Caixa de diálogo de confirmação -->
                <p:confirmDialog id="dialogConfirmExclusao" message="Tem certeza que deseja excluir este item?"
                             header="Confirmar exclusão" severity="alert" widgetVar="wvConfirm">
                    <p:commandButton id="btnConfirm" value="Continuar" oncomplete="wvConfirm.hide()"
                                 actionListener="#{publicoBean.excluirPublico}" />
                    <p:commandButton id="btnCancel" value="Cancelar" onclick="wvConfirm.hide()" type="button" /> 

                </p:confirmDialog>
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>

Id和WidVar属性不同。当我打开 Javascript 控制台并点击wvNew和wvConfirm时，它们是未定义的。可能会发生什么？

Answer 1

来自 PrimeFaces 文档：

小心使用 appendToBody，因为页面定义和 html dom 会有所不同，例如，如果对话框位于 h:form 组件内并且启用了 appendToBody，则浏览器上的对话框将超出表单并可能导致意外结果。在这种情况下，在对话框中嵌套一个表单。

Answer 2

我更改了我的 xhtml，使其现在遵循建议：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:p="http://primefaces.org/ui"
            template="./../../resources/templates/baseTemplate.xhtml">

<ui:define name="content">
    <f:view>
        <h:form id="frmPublic">
            <!-- Show general msgs -->
            <p:growl id="gMessages" globalOnly="true" sticky="false" />

            <!-- Show public list -->
            <p:dataTable id="dtPublics" value="#{publicBean.publics}"
                         paginator="true" rows="5" rowsPerPageTemplate="5,10"
                         paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         var="actual">
                <f:facet name="header">
                    <p:commandButton id="cbViewNew" value="New" type="button" styleClass="cbViewNew" onclick="dlgNewPublic.show();" />
                </f:facet>
                <!-- Edit and delete columns -->
                <p:column>
                    <p:commandButton id="cbViewEdit"  image="ui-icon-pencil" 
                                     oncomplete="dlgEditPublic.show()"  title="Edit">
                        <f:setPropertyActionListener value="#{actual}" target="#{publicBean.selectedPublic}" />
                    </p:commandButton>
                </p:column>
                <p:column>
                    <p:commandButton id="cbViewDelete" type="button" image="ui-icon-circle-close" onclick="dlgConfirm.show()" title="Delete" /> 
                </p:column>
                <p:column>
                    <f:facet name="header">
                        Name
                    </f:facet>
                    <h:outputLabel id="olViewPublicName" value="#{actual.publicName}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        Public type
                    </f:facet>
                    <h:outputLabel id="olViewPublicType" value="#{actual.publicType}"/>
                </p:column>
            </p:dataTable>
        </h:form>
        <!-- Caixa de diálogo de inclusão -->
        <p:dialog id="newPublicDialog" widgetVar="dlgNewPublic" modal="true" header="New"
                  resizable="false">
            <h:form id="frmNew">
                <p:panelGrid columns="2">
                    <p:outputLabel id="olNewPublicName" value="Name:" for="itNewPublicName"/>
                    <p:inputText id="itNewPublicName" value="#{publicBean.name}" required="true"
                                 requiredMessage="Enter the name"/>
                    <p:outputLabel id="olNewPublicType" for="somNewPublicType" value="Public type:"/>
                    <p:selectOneMenu id="somNewPublicType" value="#{publicBean.selectedPublicType}" effect="fade" 
                                     converter="#{publicBean.converter}" 
                                     required="true" requiredMessage="Select a public type"> 
                        <f:selectItem itemLabel="-- Select --" itemValue=""/>
                        <f:selectItems value="#{publicoBean.lstPublicType}" var="actual" itemLabel="#{actual.label}" itemValue="#{actual}"></f:selectItems>
                    </p:selectOneMenu>
                    <p:commandButton id="cbNewSave" value="Save" update=":dlgNewPublic" actionListener="#{publicBean.save}" icon="ui-icon-check" 
                                      oncomplete="dlgNewPublic.hide();" />
                    <p:commandButton value="Cancel" immediate="true" onclick="dlgNewPublic.hide()"/>
                    <f:facet name="footer">
                        <p:message id="mNewPublicName" for="itNewPublicName" redisplay="false" />
                        <p:message id="mNewPublicType" for="somNewPublicType" redisplay="false"  /> 
                    </f:facet>
                </p:panelGrid>
            </h:form>
        </p:dialog>
    </f:view>
</ui:define>

我的bean保存方法如下：

...

private String name;
private PublicType publicType;
private PublicDao publicDao;
private List<Public> publics;
// Getters and Setters

...

// Actions e listeners
public void save(ActionEvent ex) {
    FacesContext context = FacesContext.getCurrentInstance();
    FacesMessage msg = new FacesMessage();
    try {
        TbPublic p = new TbPublic();
        p.setName(getName() );
        p.setTdTipoPublico(getPublicType());

        publicDao.save(p);

        // Showing success msg
        msg.setSummary("Success!");
        msg.setSeverity(FacesMessage.SEVERITY_INFO);
        context.addMessage(null, msg);

        // Load the list of public again
        publicList = publicDao.getAll();


    } catch (Exception e) {
        msg.setSummary("Error !");
        msg.setSeverity(FacesMessage.SEVERITY_ERROR);
        context.addMessage(null, msg);
    }
}

当我单击新建按钮时，我的对话框完美打开。但是在我填写必要的信息并单击“保存”按钮后，什么也没有发生。为什么会这样？