Does a <p:dataList> support the page event? I'm trying to use the page event in the following way (blocking a <p:dataList> using <pe:blockUI> while going through pages).
<pe:blockUI target="dataList" widgetVar="blockDataListUIWidget">
<h:panelGrid columns="2">
<h:graphicImage library="default" name="images/ajax-loader1.gif"/>
<h:outputText value="Fetching..." class="block-ui-text"/>
</h:panelGrid>
</pe:blockUI>
<p:dataList id="dataList"
var="orderRow"
value="#{orderDetailsManagedBean}"
first="0"
rows="1"
paginator="true"
paginatorAlwaysVisible="false"
type="definition" lazy="true"
emptyMessage="Message">
<p:ajax event="page"
onstart="PF('blockDataListUIWidget').block()"
oncomplete="PF('blockDataListUIWidget').unblock()"
process="#this"
update="#none"/>
...
</p:dataList>
This does not work anymore. The page just remains blank with no errors. Events don't seem to be supported by <p:dataList>.
Can this scenario be simulated in <p:dataList> anyway?
As I have seen from the source code that page event is not supported by dataList, on the other hand dataGrid supports it.
The solution would be monkey patching as we don't have control on rewriting the original JS file, you can hook an event before the handling of the pagination and after it, all by javascript.
Here's an example:
assuming your dataList widgetVar is dataListWV
//making sure the widgetVar is ready to be used
setTimeout(dataListPaginationExtraEvents, 1000);
function dataListPaginationExtraEvents() {
var odlHandlePagination = PF('dataListWV').handlePagination;
PF('dataListWV').handlePagination = function(newState) {
//before
console.log('start fetch');
//calling original pagination
odlHandlePagination.apply(this, [newState]);
//after
console.log('end fetch');
}
}
As of PrimeFaces 5.3 final (community release), the page event is supported in <p:dataList>
The following picture is taken from the PrimeFaces user guide 5.3 (page 146).
There is no mention of Ajax behavior events in previous guides.
The page event as mentioned in the question works flawlessly in PrimeFaces 5.3 final (community release).
https://github.com/primefaces/primefaces/issues/687
https://github.com/primefaces/primefaces/commit/52b6c22eb37eca62a979d204f2030c82b795d472#diff-b651ae3f3b6abb0cf6945a9c589fa68aR98
Related
I'm using PrimeFaces poll component to refresh some content.
<h:form id="formBsvtt">
<p:messages autoUpdate="true" showDetail="false" />
<p:outputPanel id="panelOut" layout="block">
...
... content to refresh
...
</p:outputPanel>
<p:panelGrid id="panelIn" layout="block">
...
... various input components with validation
...
</p:panelGrid>
<p:poll widgetVar="poll1" autoStart="true" global="false" interval="15"
partialSubmit="true" process="#this" update="panelOut"
listener="#{myBean.myListener}">
</p:poll>
</h:form>
As you can see I'm using messages with autoUpdate=true. My Problem is: In case of validation errors FacesMessages will be shown, but disappear not later than 15 seconds.
Is it possible to prevent poll from clearing FacesMessages without setting messages autoUpdate=false?
My web application is much bigger as code snippet specified above and my intention is not updating messages manually in each possible case!
PrimeFaces 2.x/3.x
This is not natively possible, so a trick is needed. In the rendered attribute of <p:messages>, check if <p:poll> was been triggered and if so, then return false. This way JSF thinks there's no auto-updatable messages component in the component tree during rendering and will therefore ignore it.
If the <p:poll> is triggered, then its client ID appears as javax.faces.source request parameter. So, this should do:
<p:messages ... rendered="#{param['javax.faces.source'] ne poll.clientId}" />
...
<p:poll binding="#{poll}" ... />
(note: no additional bean properties needed)
PrimeFaces 4.x+
All PrimeFaces command components got a new ignoreAutoUpdate attribute which you could set to false to ignore all autoUpdate="true" components in the ajax update.
<p:poll ... ignoreAutoUpdate="true" />
For folks using Primefaces 4.0 and above, the Primefaces team have added an attribute to their ajax aware components to skip triggering components with autoUpdate set to true. So your poll would be
<p:poll ignoreAutoUpdate="true" .../>
See also their blog post about it: http://blog.primefaces.org/?p=2836
I am getting "Cannot find component with identifier "contentForm:tabView:form:addressDialogPanel" referenced from "contentForm:tabView:form:addressBookTable" " error. How can I update my panelGrid inside the widget?
<h:form id="form">
<p:dataTable id="addressBookTable">
<p:ajax event="rowSelect" listener="#{addressBookController.onRowSelect}"
update="contentForm:tabView:form:addressDialogPanel" oncomplete="addressDialog.show()" />
</p:dataTable>
<p:dialog id="addressDialogId" widgetVar="addressDialog">
<h:panelGrid id="addressDialogPanel" columns="2" cellpadding="4">
</h:panelGrid>
</p:dialog>
</h:form>
The main problem is that you are giving the wrong client ID of component's. Also p:tabView is a component it is not a form. When you define a h:form, it generates a standart HTML form element. And when you submit the page JSF uses POST to submit your data into backing bean. So nesting them is going to occur lot's of issues that you don't expect. You should seperate forms into sections like sideForm or searchForm or etc.
You should detect the correct client ID of your component when you try to update it. You can do this with your browser's developer settings(press f12 for chrome). Then select component with the magnifier button and give that ID into update property. Just like here:
You should read to learn basics of JSF for example from here
I'm using JSF 2.0, Primefaces 3.4.2, Spring 3.1.2.
I'm facing a similar problem of the guy of this link: h:commandButton works from the second click.
Like him I'm not using ajax in the <p:commandButton> but I'm using a <p:fileDownload /> inside the button tag.
I have two views: "list.xhtml" and "downloadView.xhtml". In myBean.java I send a DataModel from view "list.xhtml" to view "downloadView.xhtml" as a request attribute as shown in the code below:
FacesUtil.getServletContext().setAttribute("myDataModelFromRequest", this.myDataModel);
The bean is anotted with #Scope("view")
In view "downloadView.xhtml" I populated succesfully a dataTable with the DataModel sent from request. But the problem happens when I click in the button to download the file. It only works on second try.
I already tried to change the return of my method from null to "downloadView" but the problem was not solved.
In debug mode I noticed that only enter in the "downloadMethod()" on second click.
Anyone have an idea to solve it?
myBean.java
public String viewListMethod() {
//some work here...
FacesUtil.getServletContext().setAttribute("myDataModelFromRequest", this.myDataModel);
return "downloadView";
}
downloadView.xhtml
<h:form id="formId" prependId="false">
<p:dataTable
id="dataTableId" var="myVar" value="#{myDataModelFromRequest}"
selection="#{cargaProcessoControlador.myArray}"
paginator="true" rows="10" paginatorPosition="bottom" paginatorAlwaysVisible="false">
<f:facet name="header">
bla bla bla
</f:facet>
<p:column selectionMode="multiple" style="width:18px" />
//collumns here...
</p:dataTable>
<p:commandButton id="btDownload" ajax="false" value="Download" icon="ui-icon-document" >
<p:fileDownload value="#{myBean.downloadMethod()}" />
</p:commandButton>
</h:form>
The scope "view" on spring doesn´t exist... So you created your own, right? Just to check...
I had that kind of problem once, and I think it was something to do with validation... the
immediate=true attribute solved my problem.
This is something to do with the scope of the page. Your problem is due to partial rendering of page. Initially when you load the page it is not getting loaded fully and because of that the button is not part of that particular view when you try to click on the button for the first time. Try to make you view proper or explicitly render the page from the backing bean before displaying the page
I am using primefaces 3.2
How can I know when the user is pushing one of the pagination button in p:dataTable ?
Thanks
If you need an ajax behaviour when user changes the page, you can use the following code:
<p:dataTable value="#{bean.collection}" var="obj" >
<p:ajax event="page" update="componentsToUpdateOnPage" listener="#{bean.pageListener}" />
<p:column>
.. etc..
</p:dataTable>
If you are using a lazy loading data table, you have to override the load() method of LazyDataModel. that method is executed on page load, when page changes and also when you sort or filter the datatable.
i am trying to have a List of commandLink in every cell of dataTable.
this is small example explaining what i am trying to do
<h:form id="form1">
<p:dataTable id="doctorTable" var="doctor"
value="#{search.medecinsResult}" rowIndexVar="rowIndex">
<p:column headerText="#{search.headerDate[1]}">
<ui:repeat var="seance" value="#{search.column2[rowIndex]}">
<h:commandLink value="#{seance}" action="Reserver"
title="Réservez cette séance">
</h:commandLink>
<br />
</ui:repeat>
</p:column>
</p:datable>
</h:form>
And i define transition on the page viewState in my XML flow:
<view-state id="result">
<transition on="Reserver" to="next">
</transition>
</view-state>
the commandLink work fine outside repeat tag, but when its inside it just reload the webpage
i found JIRA issues for that, but it not resolved.
link to JIRA issue
if there is any workaround it will be great, thank's for your responses.
It's the <ui:repeat> which is the culprit. It doesn't work very well when nested in another repeating component. There are many related issues for that already, the JSF guys are working on that. The usual solution is to pick a "fullworthy" JSF UIData component instead, such as <h:dataTable>. Since you're already using PrimeFaces, I'd suggest to try <p:dataList> instead.