oncomplete="PF('dlg').hide();" causes "PF cannot be found" error [duplicate]

Question

On the PrimeFaces website, they have many examples of how to use their components. One feature that I find very useful is the ability to show and hide PrimeFaces dialogs. In the examples this is accomplished like this:

<p:dialog header="Enter FirstName" widgetVar="dlg" resizable="false">  
    <h:form id="form">  

        <h:panelGrid columns="2" style="margin-bottom:10px">  
            <h:outputLabel for="firstname" value="Firstname:" />  
            <p:inputText id="firstname" value="#{pprBean.firstname}" />  
        </h:panelGrid>  

        <p:commandButton id="submitButton" value="Submit" update=":display" oncomplete="PF('dlg').hide();"/>  

    </h:form>  
</p:dialog>  

<p:outputPanel id="display" style="display:block;margin-top:10px;">  
    <h:outputText id="name" value="Hello #{pprBean.firstname}" rendered="#{not empty pprBean.firstname}"/>  
</p:outputPanel>  

If you notice in the command button, it calls:

oncomplete="PF('dlg').hide();"

However, when I try to reproduce this example, my Firebug debugger complains that PF cannot be found. Is there something that I need to add to my JSF page to have access to PF?

Answer 1

If you use Primefaces 3.5 or older:

<p:commandButton id="submitButton" value="Submit" update=":display" oncomplete="dlg.hide();"/> 

For Primefaces 4.0 :

<p:commandButton id="submitButton" value="Submit" update=":display" oncomplete="PF('dlg').hide();"/> 

Answer 2

You can replace

oncomplete="PF('dlg').hide();"

by

oncomplete="dlg.hide();"