Question

Ok folks, i’m have a issue here: My panels and ajax behavior suddenly stopped to work. They were running perfectly, but suddenly stopped to work. I my JSF page i have a dialog panel (confirmPanel, newPanel) that must be open on the click event of commandButtons (btnNew, btnExclude). Here is the code for the JSF page.

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

The Id and WidVar attributes are different. When i open the Javascript console and hit wvNew and wvConfirm, they are undefined. What maybe happening?

Answer 1

From PrimeFaces documentation:

Use appendToBody with care as the page definition and html dom would
be different, for example if dialog is inside an h:form component and
appendToBody is enabled, on the browser dialog would be outside of
form and may cause unexpected results. In this case, nest a form
inside a dialog.