p:datatable f:facet name="output" does not display - jsf

Some basic information:
- Primefaces Version: 5.3
- Primefaces Extension Version: 3.1.0
- Java Server Faces: 2.0
I try to display a editable table but somehow the rows aren't displayed properly - you don't see any value but if you click the text input field appears with the right value which is weird...
The xhtml file
I deleted some things from the source (replaced with -)
<ui:composition template="WEB-INF/views/templates/userTemplate.xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<ui:define name="content">
<p:dataTable id="dataTable" var="oe" rowKey="#{oe.id}" value="#{showSomethingMgdBean.allUser}" lazy="true" editable="true" editMode="cell" widgetVar="cellCars">
<p:column headerText="id" style="text-align: center;">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{oe.id}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{oe.id}" style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="-">
<h:outputText value="#{oe.-}" />
</p:column>
<p:column headerText="-">
<h:outputText value="#{oe.-}" />
</p:column>
<p:column headerText="-">
<h:outputText value="#{oe.-}" />
</p:column>
<p:column headerText="-">
<h:outputText value="#{oe.-}" />
</p:column>
<p:column headerText="enabled">
<h:outputText value="#{oe.enabled}" />
</p:column>
<p:column headerText="expired">
<h:outputText value="#{oe.expired}" />
</p:column>
<p:column headerText="locked">
<h:outputText value="#{oe.locked}" />
</p:column>
<p:column>
<p:rowEditor />
</p:column>
</p:dataTable>
</ui:define>
</ui:composition>
If you need more informations let me know. Maybe it's because of my the xhtml / jsf declaration at the beginning of the file?
<ui:composition template="WEB-INF/views/templates/userTemplate.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">

I had the css and javascript files of prime-ui integrated aswell as the primefaces things in tomcat so i guess the prime-ui files had the other files overwritten and therefor i couldnt use some features of primefaces or atleast it was messing with the css. So i deleted all custom css things like #Kukeltje mentioned in the comments and it worked! :D

Related

AJAX errors on Primefaces page

I am trying to emulate the Primefaces Showcase to have a result set that uses filtering and a row expansion. I get errors whenever I try either one. The page loads without errors. In the code example, I have stripped the filtering to isolate the issue. It appears that any time an AJAX request is triggered it will give an error. The error is triggered when trying to use the row expansion as that uses an AJAX call to fetch the expanded row.
We are using Primefaces 8.0 on IBM Rad local server (Eclipse). Result set is pulled from DB2 using Hibernate and that part works.
Please help by suggesting why the AJAX fails everytime?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</h:head>
<h:body>
<ui:composition template="/template/maintemplate.xhtml">
<ui:define name="title">Search Results</ui:define>
<ui:define name="content">
<h:form id="formId">
#{searchResultsBean.init}
<p:dataTable id="parameterList" var="data"
value="#{searchResultsBean.parameterList}">
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column value="#{data.companyId}" >
<f:facet name="header">
<h:outputText value="Company ID" />
</f:facet>
<h:outputText value="#{data.companyId}" />
</p:column>
<p:column value="#{data.companyName}" >
<f:facet name="header">
<h:outputText value="Company Name" />
</f:facet>
<h:outputText value="#{data.companyName}" />
</p:column>
<p:column value="#{data.alertNumber}">
<f:facet name="header">
<h:outputText value="Alert Number" />
</f:facet>
<h:outputText value="#{data.alertNumber}" />
</p:column>
<p:column value="#{data.comment}">
<f:facet name="header">
<h:outputText value="Comment" />
</f:facet>
<h:outputText value="#{data.comment}" />
</p:column>
<p:rowExpansion>
<p:panelGrid columns="2" columnClasses="label,value"
style="width:300px">
<h:outputText value="Company ID" />
<h:outputText value="#{data.companyId}" />
<h:outputText value="Company Name" />
<h:outputText value="#{data.companyName}" />
<h:outputText value="Alert #" />
<h:outputText value="#{data.alertNumber}" />
<h:outputText value="Alert Description" />
<h:outputText value="$#{data.alertNumber}" />
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Error received in console:
ReferenceError: ajaxWaitCursorOn is not defined
Specific error in primefaces generated javascript:
$(function(){PrimeFaces.cw("AjaxStatus","widget_j_id878804506_56ad391e",{id:"j_id878804506_56ad391e",delay:0,start:function(){ajaxWaitCursorOn()},success:function(){ajaxWaitCursorOff()}});});
Note 1: We tried changing it to use #Inject instead of calling the init method and got the same result.
Note 2: We verified that jQuery is loaded using a simple alert in the console.
The issue was this line above: template="/template/maintemplate.xhtml
It was loading a template file. We didn't make this, but copied it from another project. The template file had this line in for some reason: <p:ajaxStatus onstart="ajaxWaitCursorOn()" onsuccess="ajaxWaitCursorOff()" />
I am not sure if this answer provides value to anyone except for this: Check your template files if you have any.

How to filter on primefaces?

I'm using a modal window to select a value. After i make a selection and open the modal window again. I want the modal list be filtered on the selectedValue.
It goes back to the front page.
and if open modal again and select 'ABC', it should look like this:
this is look up and which list should be put in modal xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<p:panel id="dialog-content">
<h:form id="accountLookUpModal" style="width: 777px">
 
<p:panelGrid id="Info" columns="2" columnClasses="labelColumn,fieldColumn">
<!-- TYPE -->
<h:outputLabel id="AccountType" for="accountType" value="#{message['field.type']}" />
<p:selectOneMenu id="accountType" rendered="#{not empty account.criteria}" value="#{account.criteria.accountType}" converter="#{enumerationConverter}" disabled="#{account.disableLookUp}">
<p:ajax event="change" listener="#{account.filterOnType(true)}" update="#form, :dataTableForm"/>
<f:selectItems itemLabelEscaped="true" value="#{enumerationBean.getaccountTypeList()}" var="c" itemLabel="#{message[c.bundleKey]}" itemValue="#{c}"/>
</p:selectOneMenu>
</p:panelGrid>
</h:form>
<h:form id="dataTableForm" prependId="false" style="width:777px;">
<!-- INCLUDE Account Table -->
<ui:include src="/includes/accountLookUp.xhtml">
<ui:param name="PANEL_ID" value="accountActionPanel" />
<ui:param name="DT_ID" value="accountTable" />
<ui:param name="DT_DATA" value="#{account.accountTableLookUp}" />
<ui:param name="CR_BEAN" value="#{accountBean}" />
</ui:include>
</h:form>
</p:panel>
</ui:composition>
This is the xhtml used to select the update the list:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<p:dataTable id="#{DT_ID}" var="acc" emptyMessage="" value="#{DT_DATA.values}" rowIndexVar="index"
paginator="true" selection="#{DT_DATA.selectedValues}" rows="8" paginatorPosition="top"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
editable="false" lazy="true" sortBy="#{acc.name}" sortOrder="ascending"
liveResize="true" filterDelay="100">
<p:ajax event="filter" listener="#{DT_DATA.onFilter}" />
<p:ajax event="rowToggle" listener="#{account.expandLookUp(acc)}" immediate="true"/>
<p:column styleClass="ui-column-rowtoggler" exportable="false">
<p:rowToggler id="cdtlu#{DT_ID}RT"/>
</p:column>
<!-- filterBy="#{acc.name}" -->
<p:column id="accountName" sortBy="#{acc.name}" filterBy="#{acc.name}" >
<f:facet name="header">
<h:outputText id="cu#{DT_ID}accountName" value="#{message['field.name']}" />
</f:facet>
<h:outputText id="cu#{DT_ID}accountName" value="#{acc.name}"/>
</p:column>
<!-- filterBy="#{acc.city}" -->
<p:column id="accountCity" sortBy="#{acc.city}" filterBy="#{acc.city}" >
<f:facet name="header">
<h:outputText id="cu#{DT_ID}accountCity" value="#{message['field.city']}" />
</f:facet>
<h:outputText id="cu#{DT_ID}accountCity" value="#{acc.city}" />
</p:column>
<!-- filterBy="#{acc.countryCode}" -->
<p:column id="accountCountry" sortBy="#{acc.countryCode}" filterOptions="#{enumerationBean.accountList}" filterBy="countryCode" >
<f:facet name="header">
<h:outputText id="cu#{DT_ID}CountryCode" value="#{message['field.countryCode']}" />
</f:facet>
<h:outputText id="cu#{DT_ID}TCountryCode" value="#{message[acc.countryCode.bundleKey]}" />
</p:column>
<p:column id="sel" styleClass="ui-column-rowtoggler">
<f:facet name="header">
<h:outputText id="cu#{DT_ID}Sel" value="#{message['common.sel']}" />
</f:facet>
<p:commandButton action="save-dialog" id="cu#{DT_ID}BtnSel"
actionListener="#{companySearchBean.updateCompanyOwner(acc)}"
icon="ui-icon ui-icon-e-w" >
</p:commandButton>
</p:column>
</p:dataTable>
</ui:composition>
Now i would like to filter with 'name' so that it looks it last picture. I used filterValue but then filterBy doesn't work properly and it produces null. In the nutshell if I select 'ABC' and then open the modal again. it should only contain list contain name like 'ABC'.
I'm new to prime faces so any help would be appreciated. Also i apologize for terrible diagrams.

Error occurred while convert the dataTable to excel. [duplicate]

This question already has answers here:
java.lang.NoClassDefFoundError: org/apache/poi/ss/usermodel/RichTextString at org.primefaces.component.export.ExporterFactory.getExporterForType
(2 answers)
Closed 7 years ago.
I got these error message while click the export button in the sever. I can't convert that table.
I used primeface 5.0 and netbeans 8.0.2 version and GlassFish server 4.1
How can i solve this problem?
This is my home.xhtml file.
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<p:dataTable value="#{linkController.links}" var="lis" rowKey="#{lis.link_id}" selectionMode="single" id="tbl">
<p:column headerText="Id">
<f:facet name="header"></f:facet>
#{lis.link_id}
</p:column>
<p:column headerText="name">
#{lis.link_name}
</p:column>
<p:column headerText="date">
#{lis.date}
</p:column>
<p:column headerText="time">
#{lis.time}
</p:column>
<p:column headerText="uplink">
#{lis.upLink}
</p:column>
<p:column headerText="downlink">
#{lis.downLink}
</p:column>
</p:dataTable>
<p:commandButton value="Save as excel">
<p:dataExporter type="xls" target="tbl" fileName="kananee" pageOnly="true" />
</p:commandButton>
</h:form>
</h:body>
</html>
The error is self-explanatory, and confirmed in the Primefaces manual:
For pdf exporting itext and for xls exporting poi libraries are
required in the classpath.
So here you go: https://poi.apache.org/download.html

Primefaces - all inplaces toggled when validation fail

I am using JSF 2.1 and primefaces 3.5. Let's say I have a following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Web application</title>
</h:head>
<h:body>
<h1>Editor</h1>
<h:form>
<p:wizard>
<p:tab title="Edit">
<h2>Edit:</h2>
<p:dataTable value="#{editorBean.applications}" var="app">
<p:column headerText="Id">
<p:inplace emptyLabel="Value not assigned" editor="true" effectSpeed="fast">
<p:inputText value="#{app.id}" />
</p:inplace>
</p:column>
<p:column headerText="Name">
<p:inplace emptyLabel="Value not assigned" editor="true" effectSpeed="fast">
<p:inputText value="#{app.name}" required="true" />
</p:inplace>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="Summary">
<h2>Summary:</h2>
<p:dataTable value="#{editorBean.applications}" var="app">
<p:column headerText="Id">#{app.id}</p:column>
<p:column headerText="Name">#{app.name}</p:column>
</p:dataTable>
</p:tab>
</p:wizard>
</h:form>
</h:body>
</html>
When I press next on the wizard, and validation fails (application name is blank) then all inplaces included on the page are toggled to editor mode.
I think that they shouldn't be toggled since validation for each input is performed when you accept editor for this input.
It looks awful, especially that I have a lot of inplaces.
I would like to disable toggling of each inplace editor when validation fails. Does anyone have an idea of how to solve this problem?
That's because of p:inplace component is not made for this usage purpose. There are few other components makes problems when used in data tables like inplace but for your requirement this can be useful:
<p:column headerText="Year" style="width:25%">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
<f:facet name="input"><p:inputText value="#{car.year}" style="width:96%" label="Year"/></f:facet>
</p:cellEditor>
</p:column>
You can check the full example from primefaces showcase.

datatable <p:ajax> exception

Trying to do some simple primefaces datatable ajax work and get the following exception:
javax.servlet.ServletException: /default.xhtml #17,76 Parent not an instance of ClientBehaviorHolder: org.primefaces.component.datatable.DataTable#5fdb7adc
I'm using primefaces 3.3.1. My .xhtml code is here (I copied some of it from the primefaces site to see if I could get this working), anybody got any ideas?
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui" >
<h:head>
</h:head>
<h:body>
<center>
<h:form id="form">
<p:dataTable id="personTable" var="client" value="#{tableBean.persons}"
selection="#{tableBean.person}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{tableBean.onUserSelect}"
update=":form:displayf" oncomplete="carDialog.show()" />
<p:ajax event="rowUnselect"
listener="#{tableBean.onUserUnselect}"
update=":form:displayf" />
<f:facet name="header">
Click "View" button after selecting a row to see details
</f:facet>
<p:column headerText="Name">
#{client.name}
</p:column>
<p:column headerText="Address">
#{client.address}
</p:column>
<p:column headerText="Phone" >
#{client.phone}
</p:column>
</p:dataTable>
<p:dialog id="dialog" header="Car Detail" widgetVar="carDialog" resizable="false"
showEffect="explode" hideEffect="explode">
<h:panelGrid id="displayf" columns="2" cellpadding="4">
<h:outputText value="Name:" />
<h:outputText value="#{tableBean.person.name}" />
<h:outputText value="Address:" />
<h:outputText value="#{tableBean.person.address}" />
<h:outputText value="Phone:" />
<h:outputText value="#{tableBean.person.phone}" />
</h:panelGrid>
</p:dialog>
</h:form>
</center>
</h:body>
</html>

Resources