When pagination is activate in p:dataTable? - jsf

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.

Related

Using the page event with p:dataList in PrimeFaces

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

Primefaces : update dialog content and keep it open

I'm working with JSF and PrimeFaces, and I can't handle the following situation:
I have a dialog, and I placed a dataTable on it. In one of the cells of the table I would like to display given data in 3 different ways, and I'd like to switch between them. So far I managed to switch between these rendering types via commandLink, but my problem is that when I click on one of the 3 links, the dialog closes! Can I update the content of the dialog, and be able to keep it open the same time? (I'm updating which render type to use via myMethod)
my commandLink looks like this:
<p:commandLink id="id" update=":myForm:myDialog" ajax="false"
action="#{myBean.myMethod}" oncomplete="dialog.show()">
If i don't use the ajax=false attribute, the method is not called, and I also tried imediate=true, but that's not it either.
You need to define an p:outputPanel inside your dialog and update the outputpanel, not the dialog itself (that's why your dialog closes):
<p:dialog id="myDialog" ...>
<p:outputPanel id="myOutputPanel">
... your dialog content goes here
</p>
</p:dialog>
and change your commandlink
<p:commandLink id="id" update=":myForm:myDialog:myOutputPanel" ajax="true"
action="#{myBean.myMethod}" oncomplete="dialog.show()">
Regarding the oncomplete="dialog.show()" - I'm not entirely sure if you need that. A precise answer can be given if you provide more code regarding your table and code.
I had the same problem, and solution is to update a form instead of dialog. For example:
<p:dialog id="id_dialog" ...>
<h:form id="id_form">
... content
</h>
</p:dialog>
and commandLink:
<p:commandLink update=":id_form" process="#all" ...>
This worked for me!

primefaces panelgrid update from datatable

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

p:commandButton with p:fileDownload and no ajax only works in second click

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

How to update a component inside of dataTable from outside of it

I am using Mojarra implementation of JSF 2.1 with Primefaces 3.2.
My problem approximately looks like this:
<p:dialog id="someDialog">
..
<h:form id="dialogForm">
<p:commandLink action=".."update=":someForm:someUIRepeat:someDataTable:someInputTextArea"/>
</h:form>
</p:dialog>
<h:form id="someForm">
<ui:repeat id="someUIRepeat" value=".." ..>
<p:dataTable id="someDataTable" value=.. >
<p:column>
<p:inputTextarea id="someInputTextarea" value=../>
<p:column>
.. here go other columns
<ui:repeat>
</h:form>
The issue is that when I click on the commandLink in the dialog the inputTextarea is not updated. However, if I write this in the update of the commandLink:
update=":someForm:someUIRepeat:someDataTable,:someForm:someUIRepeat:someDataTable:someInputTextArea"
then the whole dataTable gets updated and the inputTextarea updates as well, but the values in the fields located in other columns get erased after I click on the commandLink in the dialog.
The reason why I put dataTable inside of ui:repeat is that I need to bind a dataTable with each row of one collection and I think it's not related to my problem.
Any ideas how I can solve this problem?
Thanks in advance,
Nurzhan.
for start try this
added onclick="jQuery('#someForm:someButton').click();"(check the exact id of your hidden button) to your <p:commandLink inside the dialog
set the update to update=":someForm:someUIRepeat:someDataTable"
and add
<h:commandButton id="someButton" style="display:none">
<f:ajax execute="#form"></f:ajax>
</h:commandButton>
to <h:form id="someForm">
explanation: the purpose of the hidden button is to execute (send its values) the form to the server so that when you do call update the fields wont be erased...

Resources