Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

jsf - PrimeFaces TypeError: PF(...) is undefined

I followed the DataTable Filter showcase from PrimeFaces on my own DataTable. Every time the "onkeyup" event occurs I get a

TypeError: PF(...) is undefined error in Firebug and a "Uncaught TypeError: Cannot read property 'filter' of undefined

in Chrome Console. The filtering does not work.

Here is my XHTML page:

<?xml version="1.0" encoding="UTF-8"?>
<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>
        <h:title>List of User</h:title>
    </h:head>

    <h:body>
        <h:form id="UserForm" name="UserRecords">
            <p:dataTable id="users" widgetVar="usersTable" var="user" value="#{userBean.users}" scrollable="false" frozenColumns="0" sortMode="multiple" stickyHeader="true" filteredValue="#{userBean.filteredUsers}">
                <f:facet name="header">User<p:inputText id="globalFilter" onkeyup="PF('usersTable').filter()" style="float:right" placeholder="Filter"/>
                    <p:commandButton id="toggler" type="button" style="float:right" value="Columns" icon="ui-icon-calculator"/>
                    <p:columnToggler datasource="users" trigger="toggler"/>
                    <p:commandButton id="optionsButton" value="Options" type="button" style="float:right"/>
                    <p:menu overlay="true" trigger="optionsButton" my="left top" at="left bottom">
                        <p:submenu label="Export">
                            <p:menuitem value="XLS">
                                <p:dataExporter type="xls" target="users" fileName="users"/>
                            </p:menuitem>
                            <p:menuitem value="PDF">
                                <p:dataExporter type="pdf" target="users" fileName="users"/>
                            </p:menuitem>
                            <p:menuitem value="CSV">
                                <p:dataExporter type="csv" target="users" fileName="users"/>
                            </p:menuitem>
                            <p:menuitem value="XML">
                                <p:dataExporter type="xml" target="users" fileName="users"/>
                            </p:menuitem>
                        </p:submenu>
                    </p:menu>
                </f:facet>
                <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">
                    <h:outputText value="#{user.firstName}"/>
                </p:column>
                <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">
                    <h:outputText value="#{user.lastName}"/>
                </p:column>
                <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">
                    <h:outputText value="#{user.username}"/>
                </p:column>
                <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">
                    <h:outputText value="#{user.password}"/>
                </p:column>
                <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">
                    <h:outputText value="#{user.id}"/>
                </p:column>
                <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">
                    <h:outputText value="#{user.createdOn}"/>
                </p:column>
                <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">
                    <h:outputText value="#{user.lastModified}"/>
                </p:column>
            </p:dataTable>
        </h:form>
    </h:body>
</html>

I'm using PrimeFaces 5.2 with Mojarra 2.2.8 and JSF 2.2.10.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

In my case, I found that my TypeError: PF(...) is undefined error (without the additional property error) was caused by Primefaces not being able to find the widget widgetVar="usersTable" for example because of a spelling error

In this case, the console output right above the error in Firebug gives you the explanation Widget for var 'editExecContactDialogg' not available!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...