Menu
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.
738
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!
120
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.
21
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
