Primefaces: Modal dialog does not open

Question

I am trying to open the dialog of the first faces, but without success. I have the following code:

Clientescadastrados.xhtml:

...
<ui:define name="content">
    <h:form id="frm-clientes-cadastrados">
        <p:button value="Novo Cliente" styleClass="btn-cadastrar" onclick="cadastroClienteDialog.show(); return false;" />
            <p:dataTable var="cliente" value=...>
                ...
            </p:dataTable>
    </h:form>
</ui:define>

<h:form id="frm-cadastro-cliente-dialog">
    <p:dialog header="Cadastrar Cliente" widgetVar="cadastroClienteDialog" modal="true">
        Conteúdo
    </p:dialog>
</h:form>

In the browser console the following error:

Uncaught Referenceerror: cadastroClienteDialog is not defined at Htmlbuttonelement.onclick (Customersdastrados.xhtml:31)

Answer 1

onClick can’t see your widgetVar in another form.

Include your dialog within your frm-customers-registered form or refer the form to your onclick call.

Example:

<ui:define name="content">
<h:form id="frm-clientes-cadastrados">
    <p:button value="Novo Cliente" styleClass="btn-cadastrar" onclick="cadastroClienteDialog.show(); return false;" />
        <p:dataTable var="cliente" value=...>
            ...
        </p:dataTable>
    <p:dialog header="Cadastrar Cliente" widgetVar="cadastroClienteDialog" modal="true">
      Conteúdo
    </p:dialog>
</h:form>

You can check more examples and documentation at the link below: http://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml