PrimeFaces TypeError: PF(...) is undefined
PrimeFaces TypeError: PF(...) is undefined
我在自己的 DataTable 上使用了 PrimeFaces 的 DataTable Filter showcase。每次 "onkeyup" 事件发生时，我都会得到一个
TypeError: PF(...) is undefined error in Firebug and a "Uncaught
TypeError: Cannot read property 'filter' of undefined
在 Chrome 控制台中。过滤不起作用。
这是我的 XHTML 页面：
<?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>
我将 PrimeFaces 5.2 与 Mojarra 2.2.8 和 JSF 2.2.10 一起使用。
当 运行时 class 路径因重复的不同版本库而变脏时，可能会发生这种情况。然后在 class 加载和资源解析期间会发生冲突。
确保您只使用一个版本的库。这不仅适用于 PrimeFaces，也适用于 Mojarra。有2.2.8和2.2.10肯定是不对的。
在我的例子中，我发现我的 TypeError: PF(...) is undefined 错误（没有额外的 属性 错误）是由 Primefaces 无法找到小部件 widgetVar="usersTable" 引起的，例如因为拼写错误
在这种情况下，Firebug 错误上方的控制台输出给出了解释 Widget for var 'editExecContactDialogg' not available!
与@hendinas 的回答一样，这不是特定问题的解决方案，但可能对未来出现完全相同错误但原因不同的 Google 员工有所帮助。
这是@hendinas 回答的另一种情况，但是找不到您所指的东西因为它没有相同的rendered 条件.这是一个例子。
<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>
在这种情况下，widgetVar 与 onclick 的值相匹配，这样很好。但是，rendered 子句不同。如果 canEditReport 为真，那么一切正常。但是，如果 canAnnotateReport 为真，则按钮会显示，但不会显示对话框！单击该按钮时，将显示 TypeError: PF(…) is undefined 消息。
在此示例中，解决方案是使 rendered 子句对于按钮及其引用的对话框都相同。
我在自己的 DataTable 上使用了 PrimeFaces 的 DataTable Filter showcase。每次 "onkeyup" 事件发生时，我都会得到一个
TypeError: PF(...) is undefined error in Firebug and a "Uncaught TypeError: Cannot read property 'filter' of undefined
在 Chrome 控制台中。过滤不起作用。
这是我的 XHTML 页面：
<?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>
我将 PrimeFaces 5.2 与 Mojarra 2.2.8 和 JSF 2.2.10 一起使用。
当 运行时 class 路径因重复的不同版本库而变脏时，可能会发生这种情况。然后在 class 加载和资源解析期间会发生冲突。
确保您只使用一个版本的库。这不仅适用于 PrimeFaces，也适用于 Mojarra。有2.2.8和2.2.10肯定是不对的。
在我的例子中，我发现我的 TypeError: PF(...) is undefined 错误（没有额外的 属性 错误）是由 Primefaces 无法找到小部件 widgetVar="usersTable" 引起的，例如因为拼写错误
在这种情况下，Firebug 错误上方的控制台输出给出了解释 Widget for var 'editExecContactDialogg' not available!
与@hendinas 的回答一样，这不是特定问题的解决方案，但可能对未来出现完全相同错误但原因不同的 Google 员工有所帮助。
这是@hendinas 回答的另一种情况，但是找不到您所指的东西因为它没有相同的rendered 条件.这是一个例子。
<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>
在这种情况下，widgetVar 与 onclick 的值相匹配，这样很好。但是，rendered 子句不同。如果 canEditReport 为真，那么一切正常。但是，如果 canAnnotateReport 为真，则按钮会显示，但不会显示对话框！单击该按钮时，将显示 TypeError: PF(…) is undefined 消息。
在此示例中，解决方案是使 rendered 子句对于按钮及其引用的对话框都相同。