PrimeFaces TypeError: PF(...) is undefined

Question

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.

Look in generated HTML output. Which scripts are present in the ``? At least, mixing Mojarra 2.2.8 with 2.2.10 doesn't suggest that your runtime classpath is all clean and free of conflicts. Are you absolutely positive that you aren't also mixing multiple PrimeFaces versions? That would be a probable cause. — BalusC, May 19 '15 at 09:09
Thanks, after taking a closer look on the deployed Primefaces versions, I recognized that 5.1 and 5.2 were deployed parallel by some strange circumstances. Removing 5.1 solved the problem. — Sebastian Lang, May 19 '15 at 11:38

score 15 · Answer 1 · edited Jul 16 '19 at 09:59

15

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!

edited Jul 16 '19 at 09:59

Kukeltje

12,223
4
24
47

answered May 26 '15 at 06:51

hendinas

338
2
8

In at least PF 6.2 and 7.0, there is not a good explanation anymore in the console. See https://stackoverflow.com/questions/23060768/access-to-primefaces-widgetvars-on-document-ready – Kukeltje Jul 16 '19 at 09:57
In my case, I had mistakenly referred to the id instead of the wigetVar. – Pixelstix May 27 '21 at 20:06

score 4 · Accepted Answer · edited Nov 15 '19 at 22:02

4

That can happen when the runtime classpath is dirty of duplicate different versioned libraries. Conflicts would then occur during class loading and resource resolving.

Make sure that you're using only one version of a library. This not only applies to PrimeFaces, but also to Mojarra. Having both 2.2.8 and 2.2.10 is definitely not right.

edited Nov 15 '19 at 22:02

Kukeltje

12,223
4
24
47

answered May 19 '15 at 14:18

BalusC

1,082,665
372
3,610
3,555

Pixelstix · Answer 3 · 2015-09-29T19:07:15.227

Like @hendinas' answer, this is not the solution to the particular problem, but might be helpful for future Googlers that have the exact same error but with a different cause.

This is an additional case of @hendinas' answer, but where the thing you're referring to is not found because it does not have the same rendered conditions. Here is an example.

<ui:repeat id="extSyses" var="extSys" value="${cc.attrs.externalSystems}"
        varStatus="extSysLoop">
    <h:commandButton
        id="YesButton" value="Yes" type="button"
        rendered='#{(rptBean.canEditReport or rptBean.canAnnotateReport) and not extSys.closed)}'
        onclick="PF('#{cc.attrs.prefix}yesDlg#{extSysLoop.index}').show()" />

    <p:dialog id="extDocDlg" header='Enter document reference number'
        rendered='#{rptBean.canEditReport and not extSys.closed)}'
        widgetVar="#{cc.attrs.prefix}yesDlg#{extSysLoop.index}"
        width="650" minWidth="650" modal="true">
       ... Dialog Content ...
    </p:dialog>
</ui:repeat>

In this case, the widgetVar matched the value of onclick, so that was good. However, the rendered clause differed. If canEditReport was true, then everything worked fine. However, if canAnnotateReport was true, then the button would show up but it would have no dialog to display! When the button is clicked, the TypeError: PF(…) is undefined message is displayed.

In this example, the solution is to make the rendered clauses the same for both the button and the dialog it refers to.

PrimeFaces TypeError: PF(...) is undefined

3 Answers3

Linked