Geek Answers Handbook

PrimeFaces TypeError: PF (...) - undefined

I followed a demonstration of the PrimeFaces DataTable filter on my own DataTable. Every time the onkeyup event occurs, I get

TypeError: PF (...) is an undefined error in Firebug and "Uncaught TypeError: Unable to read filter property from undefined

in the Chrome console. 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 am using PrimeFaces 5.2 with Mojarra 2.2.8 and JSF 2.2.10.

+7
source share
3 answers

This can happen when the runtime class pool is dirty with duplicate versions of version libraries. Then conflicts will arise during class loading and resource resolution.

Make sure that you use only one version of the library. This applies not only to PrimeFaces, but also to Mojarra. Both 2.2.8 and 2.2.10 are definitely not the case.

+3
source

In my case, I found that my TypeError: PF(...) is undefined error TypeError: PF(...) is undefined (without an additional property error), which is because Primefaces cannot find the widget widgetVar="usersTable" for example, due to a spelling error

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

+9
source

Like @hendinas answer, this is not a solution to a specific problem, but may be useful for future Googlers who have the same error but for a different reason.

This is an additional case of @hendinas answer, but where is the thing you are talking about 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, widgetVar matches the onclick value, so that was good. However, the rendered sentence was different. If canEditReport was true, everything worked fine. However, if canAnnotateReport was true, then a button will appear, but it will not have a dialog to display! When the button is pressed, the message TypeError: PF(…) is undefined .

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

+1
source

More articles:


All Articles