Problem with the confirmDialog component of the primefaces

Question

In the view of my java application I have a commandButton that should open an exclusion dialog, however, when clicking the delete button the dialog is not shown. The code is:

<ui:composition template="/WEB-INF/template/LayoutPadrao.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<ui:define name="titulo">Pesquisa de Fabricantes</ui:define>

<ui:define name="corpo">
    <h1>Pesquisa de Fabricantes</h1>

    <h:form id="frmPesquisa">
        <p:messages id="messages" autoUpdate="true" closable="true" />

        <p:toolbar style="margin-top: 20px">
            <p:toolbarGroup>
                <p:commandButton value="Novo" id="botaoNovo" action="/fabricante/CadastroFabricante.xhtml"/>
            </p:toolbarGroup>
        </p:toolbar>

        <p:dataTable id="fabricantesTable" value="#{pesquisaFabricanteBean.fabricantes}" var="fabricante"
                style="margin-top: 20px" emptyMessage="Nenhum fabricante encontrado." rows="20"
                paginator="true" paginatorAlwaysVisible="false" paginatorPosition="bottom">
                <p:column headerText="Código" style="text-align: center; width: 100px">
                    <h:outputText value="#{fabricante.codigo}" />
                </p:column>
                <p:column headerText="Nome">
                    <h:outputText value="#{fabricante.nome}" />
                </p:column>
                <p:column style="width: 100px; text-align: center">
                    <p:button outcome="CadastroFabricante" icon="ui-icon-pencil" title="Editar">
                        <f:param name="fabricante" value="#{fabricante.codigo}"/>
                    </p:button>
                    <p:commandButton icon="ui-icon-trash" title="Excluir" oncomplete="confirmacaoExclusao.show()"
                            process="@this" update=":frmPesquisa:confirmacaoExclusaoDialog">
                        <f:setPropertyActionListener target="#{pesquisaFabricanteBean.fabricanteSelecionado}" value="#{fabricante}" />
                    </p:commandButton>
                </p:column>
        </p:dataTable>

        <p:confirmDialog id="confirmacaoExclusaoDialog" widgetVar="confirmacaoExclusao"
                message="Tem certeza que deseja excluir o fabricante #{pesquisaFabricanteBean.fabricanteSelecionado.nome}?"  
                header="Exclusão de fabricante" severity="alert">
            <p:button value="Não" onclick="confirmacaoExclusao.hide(); return false;" />
            <p:commandButton value="Sim" update=":frmPesquisa:fabricantesTable"
                    onclick="confirmacaoExclusao.hide()" action="#{pesquisaFabricanteBean.excluir}" />
        </p:confirmDialog>
    </h:form>
</ui:define>

In the browser I see the following error in the console: Referenceerror: Can’t find variable: confirmacExclusion

Answer 1

The call to the widget should be made with PF() as follows:

<p:commandButton oncomplete="PF('confirmacaoExclusao').show()" />