2015-05-19 18 views
5

Tôi đã theo Bộ lọc DataTable showcase từ PrimeFaces trên DataTable của riêng tôi. Mỗi khi sự kiện "onkeyup" xảy ra, tôi nhận đượcPrimeFaces TypeError: PF (...) là không xác định

TypeError: PF(...) is undefined error in Firebug and a "Uncaught TypeError: Cannot read property 'filter' of undefined

trong Bảng điều khiển Chrome. Việc lọc không hoạt động.

Đây là trang XHTML của tôi:

<?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> 

Tôi đang sử dụng PrimeFaces 5.2 với cá móm 2.2.8 và JSF 2.2.10.

+0

Tìm kiếm đầu ra HTML được tạo. Các tập lệnh nào hiện diện trong ''? Ít nhất, trộn Mojarra 2.2.8 với 2.2.10 không gợi ý rằng classpath thời gian chạy của bạn là sạch sẽ và không có xung đột. Bạn có hoàn toàn tích cực rằng bạn cũng không trộn nhiều phiên bản PrimeFaces không? Đó sẽ là một nguyên nhân có thể xảy ra. – BalusC

+2

Cảm ơn, sau khi xem xét kỹ hơn về các phiên bản Primefaces được triển khai, tôi nhận ra rằng 5.1 và 5.2 đã được triển khai song song bởi một số trường hợp lạ. Gỡ bỏ 5.1 đã giải quyết được vấn đề. –

Trả lời

2

Điều đó có thể xảy ra khi đường dẫn lớp thời gian chạy bị lỗi đối với các thư viện được sao chép khác nhau. Xung đột sau đó sẽ xảy ra trong quá trình tải lớp và giải quyết tài nguyên.

Đảm bảo rằng bạn chỉ sử dụng một phiên bản thư viện. Điều này không chỉ áp dụng cho PrimeFaces, mà còn áp dụng cho Mojarra. Có cả 2.2.8 và 2.2.10 chắc chắn là không đúng.

9

Trong trường hợp của tôi, tôi thấy rằng lỗi TypeError: PF(...) is undefined của tôi là do Primefaces không bieng thể tìm thấy widget widgetVar="usersTable" ví dụ do lỗi chính tả

Trong trường hợp này, giao diện điều khiển đầu ra ngay trên lỗi trong Firebug cung cấp cho bạn giải thích Widget for var 'editExecContactDialogg' not available!

1

Giống như câu trả lời của @hendinas, đây không phải là giải pháp cho vấn đề cụ thể, nhưng có thể hữu ích cho những người dùng Google trong tương lai có cùng lỗi chính xác nhưng với nguyên nhân khác.

Đây là trường hợp bổ sung của câu trả lời của @hendinas, nhưng tại đây, điều bạn đang đề cập không được tìm thấy vì không có cùng điều kiện rendered. Đây là một ví dụ.

<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> 

Trong trường hợp này, widgetVar khớp với giá trị onclick, vì vậy tốt. Tuy nhiên, mệnh đề rendered khác nhau. Nếu canEditReport là đúng, thì mọi thứ hoạt động tốt. Tuy nhiên, nếu canAnnotateReport là đúng, thì nút sẽ hiển thị nhưng sẽ không có hộp thoại nào để hiển thị! Khi nút được nhấp, thông báo TypeError: PF(…) is undefined được hiển thị.

Trong ví dụ này, giải pháp là làm cho các điều khoản rendered giống nhau cho cả nút và hộp thoại mà nó đề cập đến.

Các vấn đề liên quan