I'm using Primefaces 3.5 and trying to display a "loading" image while updating a lazy-loaded datatable. In the following AjaxStatus element, the "ajax-loader" image is displayed when datatable is updated by a commandButton action. However when ajax call and table update is completed, the image does not disappear. In other words onComplete event is not received.
<p:ajaxStatus style="width:260px;" id="ajaxStatusPanel">
<f:facet name="start">
<h:graphicImage value="../images/ajax-loader.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
Here is a portion of the form that contains the commandButton and the datatable:
<h:form>
<p:panel toggleable="true" toggleSpeed="300" header="FILTER RESULTS">
<table align="center">
<tr>
<td>NAME: </td>
<td><h:inputText value="#{personBean.personLazyData.paramName}" /></td>
</tr>
<tr>
<td>PLACE OF BIRTH : </td>
<td><h:inputText value="#{personBean.personLazyData.paramPlaceOfBirth}" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<p:commandButton value="Update" global="true"
actionListener="#{personBean.onFilterChanged}"
update="personListTable"/>
</td>
</tr>
</table>
</p:panel>
<p:dataTable id="personListTable" rendered="#{personBean.superUser}" var="person"
value="#{personBean.personLazyData}" emptyMessage="Not found."
paginator="true" rows="20" lazy="true" selection="#{personBean.selectedPersons}" global="true"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="20,50,100">
<f:facet name="header">SURVEYS</f:facet>
<p:column selectionMode="multiple" style="width:2%" />
<p:column headerText="ID" >
<h:outputText value="#{person.id}"/>
</p:column>
<p:column headerText="NAME" >
<h:outputText value="#{person.name}"/>
</p:column>
<p:column headerText="SURNAME" >
<h:outputText value="#{person.surname}" />
</p:column>
</p:dataTable>
Is there anybody who have faced a similar issue?
Another note: In cases where datatable is not rendered (or if I change rendered attribute to false), the loading image is displayed and disappeared for a very short while since no data is retrieved.
The issue is resolved when I updated primefaces version to 4.0
Related
I'm having a problem with primefaces ui. It doesnt render icon that it was supposed to be rendered when I use and the problem is not happening only on this but also on many other pages. I haven't used jquery.
I dont know what's wrong. Googled it but didnt find an answer.
Here is my code
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/WEB-INF/faces/template.xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf" xmlns:p="http://primefaces.org/ui"
xmlns:prettyfaces="http://ocpsoft.com/prettyfaces">
<ui:param name="title" value="List of Employee"/>
<ui:define name="breadcrum1">
<li><h:link value="Employee Management" outcome="pretty:home"/></li>
<li><h:link value="List Employee Record" outcome="pretty:list_employee"/></li>
</ui:define>
<ui:define name="content">
<div class="container">
<div class="row">
<div class="col-xs-10 col-md-10 span3">
<p:messages id="messages" autoUpdate="true" closable="true" globalOnly="true" style="text-align: center;"/>
<h:form id="form">
<p:dataTable
class="panel-primary table table-condensed"
var="employee" value="#{dtLazyView.lazyModel}" paginator="true" rows="10"
emptyMessage="No Employee found with given criteria"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
rowsPerPageTemplate="5,10,15" selectionMode="single" selection="#{dtLazyView.selectedEmployee}" widgetVar="employeeTable" lazy="true">
<f:facet name="header">
Employee Information
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter" onkeyup="PF('employeeTable').filter()" style="width:150px" placeholder="Enter keyword"/>
</f:facet>
<p:column headerText="Id">
<h:outputText value="#{employee.employeeCode}" />
</p:column>
<p:column headerText="Employee Name">
<h:outputText value="#{employee.employeeName}" />
</p:column>
<p:column headerText="Employee Mobile Number">
<h:outputText value="#{employee.contact.mobileNumber}" />
</p:column>
<p:column headerText="Employee Role" >
<h:outputText value="#{employee.detail.employeeRole}" />
</p:column>
<p:column headerText="Option">
<h:commandButton action="#{employeeEditController.loadData(employee)}" value="Edit" class="btn btn-primary" style="margin-left: 40px;"> <f:ajax execute="#form"/></h:commandButton>
<p:commandButton update=":form:employeeDetail" oncomplete="PF('employeeDialog').show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{employee}" target="#{dtLazyView.selectedEmployee}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:dialog header="Employee Info" widgetVar="employeeDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" styleClass="">
<p:outputPanel id="employeeDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty dtLazyView.selectedEmployee}" columnClasses="label,value">
<f:facet name="header">
<img src="../../imageshandler/#{dtLazyView.selectedEmployee.employeePicture}" class="img-responsive" style="width:200px;height: 200px;margin-left: 100px;border-radius: 50%"/>
</f:facet>
<h:outputText value="Name :" style="color: black"/>
<h:outputText value="#{dtLazyView.selectedEmployee.employeeName}" />
<h:outputText value="DOB :" style="color: black"/>
<h:outputText value="#{dtLazyView.selectedEmployee.employeeDob}" />
<h:outputText value="Gender :" style="color: black"/>
<h:outputText value="#{dtLazyView.selectedEmployee.sex}" style="color:#{dtSelectionView.selectedCar.color}"/>
<h:outputText value="Salary : " style="color: black" />
<h:outputText value="Rs : #{dtLazyView.selectedEmployee.salary.basicSalary}" />
<h:outputText value="Working date :" style="color: black"/>
<h:outputText value="#{dtLazyView.selectedEmployee.employeeDateOfCommencement}"/>
<h:outputText value="Employee Job Specification :" style="color: black"/>
<h:inputTextarea value="#{dtLazyView.selectedEmployee.detail.jobSpecification}" readonly="true"/>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</div>
</div>
</div>
</ui:define>
According to Primefaces, you can use Font Awesome for the icons, so try replacing
icon="ui-icon-search"
with
icon="fa fa-search"
Keep in mind
Font Awesome icons are provided out of the box within PrimeFaces. In
order to enable Font Awesome support, enable primefaces.FONT_AWESOME
setting as true via a context param.
Expected function is, I'm deleting a row from my primefaces datatable and adding the deleted list to another datatable. It works fine with the list until it reaches the last row. Actual issue is after deleting the last row it never updates itself datatable (both datatables original and deleted datatable properties list).
Here is the code
<p:outputPanel id="ontProp" styleClass="ontologyProperties">
<p:panelGrid id="propertiesDetail" columns="1" styleClass="ontoProperties"
rendered="#{not empty managebean.listedProperties}" >
<p:outputLabel id="propLabel" value="Available Properties" styleClass="propLabel"/>
<p:dataTable id="properties" scrollable="true" scrollHeight="200" var="prop"
value="#{managebean.listedProperties}" styleClass="propertiesList"
selection="#{managebean.addProperties}" rowKey="#{prop.name}"
rendered="#{not empty managebean.listedProperties}"
rowStyleClass="#{prop.objProp == true ? 'objprop' : null }
#{prop.objProp == false ? 'dataprop' : null}
#{prop.hasRestrictions == true ? 'restriction' : null}">
<p:column selectionMode="multiple" style="width:30px;text-align:center"/>
<p:column headerText="Domain" width="auto">
<div align="center">
<ui:repeat value="#{prop.domains}" var="domain">
<li><h:outputText value="#{domain.name}"/></li>
</ui:repeat>
</div>
</p:column>
<p:column headerText="Property" width="auto">
<div align="center">
<h:outputText id="opPropName" value=" #{prop.name}"/>
</div>
</p:column>
<p:column headerText="Range" width="auto">
<div align="center">
<ui:repeat value="#{prop.objRanges}" var="range">
<li><h:outputText value="#{range.name}"/></li>
</ui:repeat>
</div>
</p:column>
<f:facet name="footer">
<div align="left">
<p:commandButton id="cmdPruneProp" actionListener="#{managebean.savePropertiesForClass()}"
icon="ui-icon-plus" update=":topForm:form:growl :topForm:form:properties
:topForm:form:remProp" value="#{msg['apply.pruneProperties']}" >
</p:commandButton>
</div>
</f:facet>
</p:dataTable>
<p:dataTable id="remProp" scrollable="true" scrollHeight="200" var="prop"
value="#{managebean.selectedProperties}" styleClass="propertiesList"
rowKey="#{prop.name}" rowStyleClass="#{prop.objProp == true ? 'objprop' : null }
#{prop.objProp == false ? 'dataprop' : null} #{prop.hasRestrictions == true ? 'restriction' : null}">
<p:column headerText="Domain" width="auto">
<div align="center">
<ui:repeat value="#{prop.domains}" var="domain">
<li><h:outputText value="#{domain.name}"/></li>
</ui:repeat>
</div>
</p:column>
<p:column headerText="Property" width="auto">
<div align="center">
<h:outputText id="rpropName" value=" #{prop.name}"/>
</div>
</p:column>
<p:column headerText="Range" width="auto">
<div align="center">
<ui:repeat value="#{prop.objRanges}" var="range">
<li><h:outputText value="#{range.name}"/></li>
</ui:repeat>
</div>
</p:column>
<p:column headerText="Remove">
<div align="center">
<p:commandButton id="removeButton" icon="ui-icon-closethick" title="Remove"
action="#{managebean.removePropertiesForClass}"
update=":topForm:form:growl :topForm:form:properties
:topForm:form:remProp">
<f:setPropertyActionListener value="#{prop}"
target="#{managebean.ontologicalPropertyDTO}"/>
</p:commandButton>
</div>
</p:column>
</p:dataTable>
</p:panelGrid>
I'm using primefaces 5.1.
Appreciate your help.
you should use a unique identifier for a row, try using another rowKey for both datatbles
I am using a complex datatable that can sort and filter with various filter. my problem is as I try to use column filter, global filter or sorting datatable pagination suddenly drops to 1 page and it doesn't turn back to first state with pagination. At the beginning I have 92 pages but after filtering/sorting it becomes a datatable with 1 page, even though I clear the textbox of filter it stays as 1 page.
Here is my datatable:
<h:panelGroup rendered="#{projectsController.items.rowCount > 0}">
<p:growl id="growl" />
<p:dataTable id="datatable" value="#{projectsController.items}" var="item" filterEvent="keyup"
paginator="true" rows="5" emptyMessage="Proje bulunamadı." paginatorPosition="bottom"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="4,5,6,7,8,9,10"
filteredValue="#{projectsController.filteredProjects}" style="font-size:11px;font-weight: bold;" widgetVar="proj" >
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Tüm Alanlarda Ara: " />
<p:inputText id="globalFilter" onkeyup="proj.filter();" style="width:150px" />
</p:outputPanel>
</f:facet>
<p:column id="c1" headerText="Proje Adı" width="500" filterStyle="display:none" styleClass="wrap" sortBy="#{item.projectname}" filterBy="#{item.projectname}" filterMatchMode="contains" >
<h:outputText value="#{item.projectname}"/>
</p:column>
<p:column headerText="İlçe" width="150" styleClass="wrap" filterStyle="display:none" filterBy="#{item.district}" sortBy="#{item.district}" filterOptions="#{populator.districtsDD}" filterMatchMode="exact">
<h:outputText value="#{item.district}"/>
</p:column>
<p:column headerText="Sektör" width="150" styleClass="wrap" filterStyle="display:none" filterBy="#{item.sector}" sortBy="#{item.sector}" filterOptions="#{populator.sectorsDD}" filterMatchMode="exact">
<h:outputText value="#{item.sector}"/>
</p:column>
<p:column headerText="Başlangıç Tarihi" width="150" styleClass="wrap" filterStyle="display:none" sortBy="#{item.startdate}" filterBy="#{item.startdate}" filterMatchMode="contains">
<h:outputText value="#{item.startdate}"/>
</p:column>
<p:column headerText="Bitiş Tarihi" width="150" styleClass="wrap" filterStyle="display:none" sortBy="#{item.enddate}" filterBy="#{item.enddate}" filterMatchMode="contains">
<h:outputText value="#{item.enddate}"/>
</p:column>
<p:column headerText="İş Durumu" width="150" styleClass="wrap" filterStyle="display:none" sortBy="#{item.workstatus}" filterBy="#{item.workstatus}" filterMatchMode="contains">
<h:outputText value="#{item.workstatus}"/>
</p:column>
<p:column>
<p:commandButton id="selectButton" update=":display" oncomplete="carDialog.show()" icon="ui-icon-search" title="Detayları Gör">
<f:setPropertyActionListener value="#{item}" target="#{projectsController.selectedP}" />
<p:ajax event="click" update=":viewTabs:tabView:mapTab"/>
</p:commandButton>
<p:commandButton id="editButton" update=":displayEdit" oncomplete="editDialog.show()" icon="ui-icon-pencil" title="Düzenle">
<f:setPropertyActionListener value="#{item}" target="#{projectsController.selectedP}" />
</p:commandButton>
<p:commandButton update="growl" title="Projeyi Sil" id="confirm" action="#{projectsController.destroy}" icon="ui-icon-trash" ajax="false" onclick="if (!confirm('Bu projeyi gerçekten silmek istiyor musunuz?'))
return false;"/>
</p:column>
</p:dataTable>
After filtering or sorting how can I reset my datatable to first state? Thanks in advance.
Primefaces 3.5, Oracle WebLogic 10g, JSF 2.2
Here is the snapshot:
![enter image description here][1]
For those who want to know solution, I have removed both jsf-api.jar and jsf-impl.jar from the libraries instead I have put netbeans' own jsf2.1 library. Basically I have downgraded to jsf2.1. I just suspect if jsf-api and jsf-impl gives me the support of jsf2.2.
Hope this helps to someone.
I am running a JSF2 web application with PrimeFaces 3.5 on GlassFish 3.1.2. I want to implement CSV import functionality, so that the read values are filled in to the components without page reload.
Technically, after a file upload with <p:fileUpload>, I want to update a component which creates the input fields iteratively with <ui:repeat>. Here is the simplified code of my view:
<ui:define name="content">
<h:form id="form" prependId="false" enctype="multipart/form-data">
<p:growl id="growl" showDetail="true" life="5000" />
<p:panel header="Values">
<h:panelGroup id="grid" layout="block">
<p:commandButton actionListener="#{table.handlePost}"
id="postTop" value="Save" update="growl" />
<p:commandButton id="dlTop" value="Export CSV" ajax="false"
onclick="PrimeFaces.monitorDownload(start, stop)"
icon="ui-icon-arrowthichk-s">
<p:fileDownload value="#{table.csv}" />
</p:commandButton>
<p:fileUpload fileUploadListener="#{table.handleFileUpload}"
mode="advanced" update="tableView, growl" sizeLimit="10000"
allowTypes="/(\.|\/)(csv)$/" label="Import CSV"
showButtons="false" />
<h:panelGroup id="tableView" layout="block">
<table>
<tr>
<th>Day</th>
<th>Value</th>
</tr>
<ui:repeat value="#{table.values}" varStatus="val" id="table">
<tr>
<td><h:outputText
value="#{table.date}-#{val.index+1}" /></td>
<td><h:inputText id="value"
value="#{table.values[val.index]}"
converter="javax.faces.Double" /></td>
</tr>
</ui:repeat>
</table>
</h:panelGroup>
<p:commandButton actionListener="#{table.handlePost}"
id="postBottom" value="Save" update="growl" />
<p:commandButton id="dlBottom" value="Export CSV" ajax="false"
onclick="PrimeFaces.monitorDownload(start, stop)"
icon="ui-icon-arrowthic hk-s">
<p:fileDownload value="#{table.csv}" />
</p:commandButton>
</h:panelGroup>
</p:panel>
</h:form>
</ui:define>
table bean:
#ViewScoped
#ManagedBean(name="table")
public class TableView { }
Values are read correctly, I can update any component to output table.values, except with <p:fileUpload>, contents of the <ui:repeat> are never updated. If I update tableView from any other component other than <p:fileUpload>, the contents of <ui:repeat> are updated correctly. What could be the problem?
I don't think the file upload component supports the ajax update tag, so you may have to do a full page refresh...you could do this in javascript by using: oncomplete="javascript:window.location.reload(true)"
I am trying to user a form in 'panelGrid' to render values in a dataTable using <f:ajax>. However, when submitting using the <h:commandButton> the values sent are not displayed in the dataTable. I am not getting a stack or any console errors in the browsers.
This is the my xhtml (Simplified):
Product Catalog:
<p:tabView id="tabView" style="width: 65%" >
<p:tab id="books" title="Books">
<p:dataGrid var="book" value="#{saleBean.productList}" columns="3"
rows="9" paginator="true" paginatorTemplate="{CurrentPageReport}
{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink}
{LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="3,6,9">
<h:form id="product" >
<p:panel header="#{book.name}" style="text-align: center">
<h:panelGrid columns="1" style="width: 65%">
<!-- Add Book Images here -->
<h:outputText value="#{book.price}"/>
<h:outputLabel value="Dct (in dollars): " />
<h:inputText id="discount" value="#{saleBean.item.unit_discount}" style="width: 50%" />
<p:commandButton value="Add to Cart" update=":dataTableForm:sc"
action="#{saleBean.doAddItem}"/>
</h:panelGrid>
</p:panel>
</h:form>
</p:dataGrid>
</p:tab>
<p:tab id="arts" title="Art / Various">
<!-- Art Products to be added here -->
</p:tab>
<p:tab id="other" title="Other">
<!-- Various Products to be Added here -->
</p:tab>
</p:tabView>
<hr/>
<h1>Shopping Cart</h1>
<hr/>
<h:form id="dataTableForm">
<p:dataTable id="sc" value="#{saleBean.sd}" var="item" style="width: 60%">
<p:column>
<f:facet name="header">
<h:outputText value="Product"/>
</f:facet>
<h:outputText value="#{item.product_fk}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Quantity"/>
</f:facet>
<h:outputText value="#{item.quantity}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Unit Price"/>
</f:facet>
<h:outputText value="#{item.unit_Cost}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Unit Discount"/>
</f:facet>
<h:outputText value="#{item.unit_discount}"/>
</p:column>
</p:dataTable>
</h:form>
</h:body>
This the bean (Simplified):
public String doAddItem()
{
item.setUnit_Cost(product.getPrice());
item.setProduct_fk(product);
item.setQuantity(1);
sd.add(item);
return "productCatalog";
}
According to PrimeFaces documentation :
http://www.primefaces.org/docs/vdl/3.4/primefaces-p/commandButton.html
Your actionListener="#{saleBean.doAddItem}" must use a function corresponding to that :
public void doAddItem(ActionListener event)
{
// do your stuff
}
To use action here is an example :
action="#{saleBean.doAddItem}"
public String doAddItem(void)
{
item.setUnit_Cost(product.getPrice());
item.setProduct_fk(product);
item.setQuantity(1);
sd.add(item);
return "productCatalog";
}
Try to use only pf components when you can eg p:datatable. Replace the button with a p:commandButton and use process and update instead of f:ajax.
Also maybe it will by better to include the p:datatable in the form too.