2015-05-19 12 views
5

Ho seguito il filtro DataTable showcase da PrimeFaces sul mio DataTable. Ogni volta che si verifica l'evento "onKeyUp" ho unTipo PrimeFacesErrore: PF (...) non definito

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

in Chrome Console. Il filtraggio non funziona.

Qui è la mia pagina 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> 

sto usando primefaces 5.2 con Mojarra 2.2.8 e 2.2.10 JSF.

+0

Cerca nell'output HTML generato. Quali script sono presenti nel ''? Almeno, la combinazione di Mojarra 2.2.8 con 2.2.10 non suggerisce che il tuo classpath di runtime sia tutto pulito e privo di conflitti. Sei assolutamente positivo che tu non stia mescolando più versioni PrimeFaces? Questa sarebbe una probabile causa. – BalusC

+2

Grazie, dopo aver dato un'occhiata più da vicino alle versioni Primefaces distribuite, ho riconosciuto che 5.1 e 5.2 sono stati distribuiti parallelamente da alcune strane circostanze. La rimozione di 5.1 ha risolto il problema. –

risposta

2

Ciò può accadere quando il classpath di runtime è sporco di librerie con versioni diverse duplicate. I conflitti si sarebbero verificati durante il caricamento della classe e la risoluzione delle risorse.

Assicurarsi di utilizzare solo una versione di una libreria. Questo non si applica solo a PrimeFaces, ma anche a Mojarra. Avere sia il 2.2.8 che il 2.2.10 non è assolutamente corretto.

9

Nel mio caso, ho scoperto che il mio errore TypeError: PF(...) is undefined è stato causato da primefaces non bieng grado di trovare il widget di widgetVar="usersTable" per esempio a causa di un errore di ortografia

In questo caso, l'output della console proprio sopra l'errore in Firebug ti dà la spiegazione Widget for var 'editExecContactDialogg' not available!

1

Come la risposta di @hendinas, questa non è la soluzione al problema specifico, ma potrebbe essere utile per i futuri googler che hanno lo stesso errore ma con una causa diversa.

Si tratta di un ulteriore caso di risposta @hendinas', ma dove la cosa ti riferisci non si trova perché non hanno le stesse condizioni rendered. Ecco un esempio.

<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 questo caso, il widgetVar accoppiati il ​​valore di onclick, così che era buono. Tuttavia, la clausola rendered differiva. Se canEditReport fosse vero, allora tutto ha funzionato bene. Tuttavia, se canAnnotateReport era vero, il pulsante appariva ma non avrebbe nessuna finestra di dialogo da visualizzare! Quando si fa clic sul pulsante, viene visualizzato il messaggio TypeError: PF(…) is undefined.

In questo esempio, la soluzione è rendere le clausole rendered uguali sia per il pulsante che per la finestra di dialogo a cui fa riferimento.

Problemi correlati