PrimeFaces TypeError: PF(...) 未定义答案

【问题标题】：PrimeFaces TypeError: PF(...) is undefinedPrimeFaces TypeError: PF(...) 未定义
【发布时间】：2015-05-19 07:33:04
【问题描述】：

我在自己的 DataTable 上遵循了 PrimeFaces 中的 DataTable Filter showcase。每次发生“onkeyup”事件时，我都会得到一个

TypeError: PF(...) is undefined error in Firebug 和“Uncaught TypeError：无法读取未定义的属性“过滤器”

在 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 一起使用。

【问题讨论】：

查看生成的 HTML 输出。 <head> 中有哪些脚本？至少，将 Mojarra 2.2.8 与 2.2.10 混合并不意味着您的运行时类路径完全干净且没有冲突。你绝对肯定你不会混合多个 PrimeFaces 版本吗？这可能是一个原因。
谢谢，在仔细查看已部署的 Primefaces 版本后，我发现 5.1 和 5.2 是在一些奇怪的情况下并行部署的。删除 5.1 解决了这个问题。

标签： jsf primefaces

【解决方案1】：

就我而言，我发现我的 TypeError: PF(...) is undefined 错误（没有附加属性错误）是由于 Primefaces 无法找到小部件 widgetVar="usersTable" 导致的，例如因为拼写错误

在这种情况下，Firebug 中错误正上方的控制台输出会给出解释Widget for var 'editExecContactDialogg' not available!

【讨论】：

至少在 PF 6.2 和 7.0 中，控制台中不再有很好的解释。见stackoverflow.com/questions/23060768/…
就我而言，我错误地引用了 id 而不是 wigetVar。

【解决方案2】：

当 runtime 类路径包含重复的不同版本库时，可能会发生这种情况。然后在类加载和资源解析期间会发生冲突。

确保您只使用一个版本的库。这不仅适用于 PrimeFaces，也适用于 Mojarra。同时拥有 2.2.8 和 2.2.10 肯定是不对的。

【讨论】：

【解决方案3】：

就像@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 子句相同。

【讨论】：