Dialog does not open

Question

When I click the new button should open a dialog window but does not open and gives this error in the console:

widget for var 'test' not available

What can it be ?

<ui:define name="menu">
    <ui:include src="/includes/menuPrincipal.xhtml"></ui:include>
</ui:define>



<ui:define name="conteudo">
    <h:form>
        <p:dataTable emptyMessage="Nenhum registro encontrado"
            value="#{MBFrabicante.itens}" var="item" paginator="true" rows="10">

            <f:facet name="header">
                Fabricante - listagem
            </f:facet>

            <p:column headerText="Código" sortBy="#{item.codigo}"
                filterBy="#{item.codigo}">
                <h:outputText value="#{item.codigo}" />
            </p:column>

            <p:column headerText="Descrição">
                <h:outputText value="#{item.descricao}"></h:outputText>
            </p:column>

            <f:facet name="footer">
            <p:commandButton value="Novo" onclick="PF('teste').show();" />
            </f:facet>
        </p:dataTable>
    </h:form>
</ui:define>

<p:dialog widgetVar="teste" resizable="false" header="Fabricante - Novo"
        modal="true" appendTo="@(body)">
    <h:form>
        <h:panelGrid columns="2">
            <p:outputLabel value="Descrição: "></p:outputLabel>
            <p:inputText size="30" maxlength="50" />
        </h:panelGrid>
        <h:panelGrid columns="2">
            <p:commandButton value="Gravar" />
            <p:commandButton value="Cancelar" onclick="PF('dlgFabNovo').hide();" />
        </h:panelGrid>
    </h:form>
</p:dialog>

Answer 1

I already had this problem, I solved by putting the modal = "false". I can not explain why the problem with the modal = "true".

<p:dialog widgetVar="teste" resizable="false" header="Fabricante - Novo"
        modal="false" appendTo="@(body)">

Answer 2

Hello! Taking a quick look I noticed some details that you missed out on. First of all know that all the action components of the primefaces (commandXXX) by default already make requests via ajax. When you place a button inside a form, when it is clicked, the form will be submitted to managedbean and if there is no navigation, the current page will only be reloaded. Knowing this, I make the following considerations about your code:

1 - Placing type="button" on the button, your button will not submit the form (and you do not want to submit your form just open the form so I realized)

2 - The action of your cancel button is trying to access the widgetvar of a component that does not exist on the page. I believe that you want to close the dialogue and therefore should have used "test" for the PF function of the first faces

3 - If the 2 points above do not solve, try to place the dialog inside the ui tag:define

At the end, using the 3 points, it would look like this:

<ui:define name="conteudo">
    <h:form>
        <p:dataTable>        
            (...)
            <f:facet name="footer">
                <p:commandButton value="Novo" onclick="PF('teste').show();" type="button"/>
            </f:facet>

        </p:dataTable>
    </h:form>
    <p:dialog widgetVar="teste" resizable="false" header="Fabricante - Novo"
              modal="true" appendTo="@(body)">      
        <h:form>
            <h:panelGrid columns="2">
                <p:outputLabel value="Descrição: "></p:outputLabel>
                <p:inputText size="30" maxlength="50" />
            </h:panelGrid>

            <h:panelGrid columns="2">
                <p:commandButton value="Gravar" />
                <p:commandButton value="Cancelar" onclick="PF('teste').hide();" />
            </h:panelGrid>
        </h:form>
    </p:dialog>
</ui:define>

Anything gives a feedback. Good study!