Search code examples
jsfprimefacesjsf-2

Primefaces dialog is always visible

I am trying dialog framework to open a popup on click on a command button. The problem is that primefaces dialog is always visible. Please help, did I do something wrong.

It looks like ...

The problem is that the data is immediately displayed.

faces-config.xml:

    <application>
       <action-listener>org.primefaces.application.DialogActionListener</action-listener>
        <navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
        <view-handler>org.primefaces.application.DialogViewHandler</view-handler>
    </application>

Here is my code. 

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<body>

<h:form>
     <h:panelGrid columns="1" cellpadding="5">
    <p:commandButton value="Basic" type="button" onclick="PF('dlg1').show();" />

    <p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />

    <p:commandButton value="Effects" type="button" onclick="PF('dlg3').show();" /> 
</h:panelGrid>

<p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
    <h:outputText value="Resistance to PrimeFaces is futile!" />
</p:dialog>

<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
    <h:outputText value="This is a Modal Dialog." />
</p:dialog>   

<p:dialog header="Effects" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="100">
    <h:outputText value="This dialog has nice effects." />
</p:dialog>


</h:form>

</body>
</html>
Solution

  • You can delete the faces-config.xml, it's only for the Dialog Framework http://www.primefaces.org/showcase/ui/df/basic.xhtml

    Jaqen H'ghar is right, you need <h:head> and <h:body>. Here is a complete example.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Dialog Example</title>
</h:head>
<h:body>

    <h:form>
        <h:panelGrid columns="1" cellpadding="5">
            <p:commandButton value="Basic" type="button"
                onclick="PF('dlg1').show();" />

            <p:commandButton value="Modal" type="button"
                onclick="PF('dlg2').show();" />

            <p:commandButton value="Effects" type="button"
                onclick="PF('dlg3').show();" />
        </h:panelGrid>

        <p:dialog header="Basic Dialog" widgetVar="dlg1" minHeight="40">
            <h:outputText value="Resistance to PrimeFaces is futile!" />
        </p:dialog>

        <p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true"
            height="100">
            <h:outputText value="This is a Modal Dialog." />
        </p:dialog>

        <p:dialog header="Effects" widgetVar="dlg3" showEffect="explode"
            hideEffect="bounce" height="100">
            <h:outputText value="This dialog has nice effects." />
        </p:dialog>


    </h:form>
</h:body>
</html>