title: PrimeFaces TypeError: PF(...) is undefined
body: <p>I followed the DataTable Filter <a href="http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml" rel="noreferrer">showcase</a> from PrimeFaces on my own DataTable. Every time the "onkeyup" event occurs I get a</p>
  
  <blockquote>
    <p>TypeError: PF(...) is undefined error in Firebug and a "Uncaught
    TypeError: Cannot read property 'filter' of undefined</p>
  </blockquote>
  
  <p>in Chrome Console. The filtering does not work.</p>
  
  <p>Here is my XHTML page:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;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"&gt;
      &lt;h:head&gt;
          &lt;h:title&gt;List of User&lt;/h:title&gt;
      &lt;/h:head&gt;
  
      &lt;h:body&gt;
          &lt;h:form id="UserForm" name="UserRecords"&gt;
              &lt;p:dataTable id="users" widgetVar="usersTable" var="user" value="#{userBean.users}" scrollable="false" frozenColumns="0" sortMode="multiple" stickyHeader="true" filteredValue="#{userBean.filteredUsers}"&gt;
                  &lt;f:facet name="header"&gt;User&lt;p:inputText id="globalFilter" onkeyup="PF('usersTable').filter()" style="float:right" placeholder="Filter"/&gt;
                      &lt;p:commandButton id="toggler" type="button" style="float:right" value="Columns" icon="ui-icon-calculator"/&gt;
                      &lt;p:columnToggler datasource="users" trigger="toggler"/&gt;
                      &lt;p:commandButton id="optionsButton" value="Options" type="button" style="float:right"/&gt;
                      &lt;p:menu overlay="true" trigger="optionsButton" my="left top" at="left bottom"&gt;
                          &lt;p:submenu label="Export"&gt;
                              &lt;p:menuitem value="XLS"&gt;
                                  &lt;p:dataExporter type="xls" target="users" fileName="users"/&gt;
                              &lt;/p:menuitem&gt;
                              &lt;p:menuitem value="PDF"&gt;
                                  &lt;p:dataExporter type="pdf" target="users" fileName="users"/&gt;
                              &lt;/p:menuitem&gt;
                              &lt;p:menuitem value="CSV"&gt;
                                  &lt;p:dataExporter type="csv" target="users" fileName="users"/&gt;
                              &lt;/p:menuitem&gt;
                              &lt;p:menuitem value="XML"&gt;
                                  &lt;p:dataExporter type="xml" target="users" fileName="users"/&gt;
                              &lt;/p:menuitem&gt;
                          &lt;/p:submenu&gt;
                      &lt;/p:menu&gt;
                  &lt;/f:facet&gt;
                  &lt;p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.firstName}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="FirstName" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true"&gt;
                      &lt;h:outputText value="#{user.firstName}"/&gt;
                  &lt;/p:column&gt;
                  &lt;p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.lastName}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="LastName" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true"&gt;
                      &lt;h:outputText value="#{user.lastName}"/&gt;
                  &lt;/p:column&gt;
                  &lt;p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.username}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="Username" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true"&gt;
                      &lt;h:outputText value="#{user.username}"/&gt;
                  &lt;/p:column&gt;
                  &lt;p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.password}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="Password" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true"&gt;
                      &lt;h:outputText value="#{user.password}"/&gt;
                  &lt;/p:column&gt;
                  &lt;p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.id}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="Id" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true"&gt;
                      &lt;h:outputText value="#{user.id}"/&gt;
                  &lt;/p:column&gt;
                  &lt;p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.createdOn}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="CreatedOn" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true"&gt;
                      &lt;h:outputText value="#{user.createdOn}"/&gt;
                  &lt;/p:column&gt;
                  &lt;p:column disabledSection="false" colspan="1" exportable="true" filterBy="#{user.lastModified}" filterMatchMode="startsWith" filterStyle="display:none; visibility:hidden;" filterable="true" headerText="LastModified" priority="0" rendered="true" resizable="true" rowspan="1" selectRow="true" sortable="true" toggleable="true" visible="true"&gt;
                      &lt;h:outputText value="#{user.lastModified}"/&gt;
                  &lt;/p:column&gt;
              &lt;/p:dataTable&gt;
          &lt;/h:form&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm using PrimeFaces 5.2 with Mojarra 2.2.8 and JSF 2.2.10.</p>