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.
Related
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.
This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 5 years ago.
I know there are similiar questions here but none of the solutions worked for me. Before I used primeface datatable every thing was working perfectly but I needed paginator of primefaces so I switched to primeface's datatable instead of default jsf datatable. The problem is I have a column named action where somebuttons will be placed. For instance one of the button is "Buy". When I click this button the program will take from product database and add it to cart database. This is working perfectly with jsf datatable. But in primefaces datatable it's either not doing anything or gives null point exception. This is my xhtml file. It gives null point exception if I click buy button for the first item in the datatable if I click for anything else it's not doing anything.
<?xml version="1.0" encoding="UTF-8" ?>
<!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: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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Shopping</title>
<h:outputStylesheet library="css" name="Product-table.css" />
</h:head>
<body>
<h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
<br></br>
<br></br>
<div style="width: 100%;">
<div style="width: 75%; float: left;">
<h2>Products</h2>
<h:form>
<p:dataTable var="product" value="#{databaseBean.products}"
filteredValue="#{databaseBean.filteredProducts}"
widgetVar="productWidget" paginator="true" rows="10"
paginatorTemplate="{CurrentPageReport} {FirstPageLink}
{PreviousPageLink} {PageLinks} {NextPageLink}
{LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15,20,25">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search:" />
<p:inputText id="globalFilter"
onkeyup="PF('productWidget').filter()" style="width:150px"
placeholder="Search text" />
</p:outputPanel>
</f:facet>
<p:column headerText="Id" filterBy="#{product.id}" filterMatchMode="contains">
<h:outputText value="#{product.id}" />
</p:column>
<p:column headerText="Name" filterBy="#{product.name}" filterMatchMode="contains" >
<h:outputText value="#{product.name}" />
</p:column>
<p:column headerText="Price" filterBy="#{product.price}" filterMatchMode="contains">
<h:outputText value="#{product.price}" />
</p:column>
<p:column headerText="Quantity" filterBy="#{product.quantity}" filterMatchMode="contains">
<h:outputText value="#{product.quantity}" />
</p:column>
<p:column headerText="Category" filterBy="#{product.category}" filterMatchMode="contains" >
<h:outputText value="#{product.category}" />
</p:column>
<p:column>
<f:facet name="header">Action</f:facet>
<h:form>
<h:commandButton type="submit" value="#{product.id}"
name="buyLink" action="#{databaseBean.addtoCart}">
<f:param name="productId" value="#{product.id}" />
<f:param name="userId" value="#{loginBean.name}" />
</h:commandButton>
</h:form>
</p:column>
</p:dataTable>
</h:form>
</div>
<div style="width: 25%; float: right;">
<h2>Cart</h2>
<p:dataTable value="#{databaseBean.cart}" var="product"
styleClass="product-table" headerClass="product-table-header"
rowClasses="product-table-odd-row,product-table-even-row">
<p:column>
<f:facet name="header">Product ID</f:facet>
#{product.productId}
</p:column>
<p:column>
<f:facet name="header">Quantity</f:facet>
#{product.quantity}
</p:column>
</p:dataTable>
</div>
</div>
<h:form>
<h:commandButton action="#{loginBean.logout}" value="logout"></h:commandButton>
</h:form>
This is the method that the button should call. As I said it's working perfectly in default jsf datatable so I do not think anything is wrong with the java code but the problem is in xhtml file.
public void addtoCart(){
//userId = getUserID();
ManageCart MC = new ManageCart();
FacesContext fc = FacesContext.getCurrentInstance();
Map<String,String> params =
fc.getExternalContext().getRequestParameterMap();
String productIdString = params.get("productId");
int productId = Integer.parseInt(productIdString);
MC.addToChart(userId, productId, 1);
cart = mc.listCart(userId);
products = mp.listProducts();
}
I would really appreciate any help.
Thank you.
I found the solution. I needed to delete tag <h:form></h:form> from the code block of action column and it works.
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
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>
When I select a row in my primefaces datatable the row highights, but the selection event is not being invoked and the selected row data is not going to it. Also I notice that my eclipse debugger seems to just hang with PrimeFaces, anyone else notice this? Below is my .xhtml.
<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<h:outputStylesheet library="css" name="table-style.css" />
</h:head>
<h:body>
<center>
<p:dataTable var="user" value="#{customer.getCustomerList()}"
selection="#{customer.selectedCustomer}" selectionMode="single"
rowSelectListener="#{custmoer.onUserSelect}" onRowSelectUpdate="userUpdateForm"
onRowUnselectUpdate="userUpdateForm"
paginator="true" rows="5" rowKey="#{user.customerID}" >
<p:column>
<f:facet name="header">
<h:outputText value="Id" />
</f:facet>
<h:outputText value="#{user.customerID}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<h:outputText value="#{user.name}" />
</p:column>
<p:column >
<f:facet name="header">
<h:outputText value="Address" />
</f:facet>
<h:outputText value="#{user.address}" />
</p:column>
</p:dataTable>
<p:inputText id="userUpdateForm" value="#{customer.selectedCustomer.name}" />
</h:form>
</center>
</h:body>
your onXXX attributes are bound to opaque strings, when they're supposed to be bound to javascript fragments (either a method call or a fragment that executes some code). i'm guessing javascript is throwing an exception, and nothing gets sent to the server because execution in the browser halts.
Put the <p:datatable> into a <h:form> component.
May be this is only a missing <h:form> start tag in your post (the </h:form> end tag is included). But forgetting to wrap a data posting component into a <h:form> is a common mistake which leads to the symptoms described by you.
Seems the problem was IE9. Problem disappeared with Firefox.
This can happen if there is another issue in the data table for example in my case the table is editable but I did not add editMode attribute after I added it selection also started working.