Hi guys I have two live scroll datatable in a same page once I scroll ajaxstatus is loading fine. But I want to implement ajax loading for the particular datatable live scroll process. For other events in the page ajaxloader should not load what to do ? I have included ajaxstatus in each datatable header. check the image for more clarity
<f:facet name="header">
<p:ajaxStatus style="float:right;margin-right: 3em;padding-top: 0.2em;">
<f:facet name="default">
<p:graphicImage value="/resources/images/login/loading.gif" />
</f:facet>
<f:facet name="start">
<p:graphicImage value="/resources/images/login/loading.gif" />
</f:facet>
<f:facet name="complete">
</f:facet>
</p:ajaxStatus>
</f:facet>
Related
I have created a little popup dialog with header, content and footer.
Now I want to get some information from the database using my JSF bean to display who was the last person that edited this account.
This is what I did:
<f:facet name="footer">
<h:panelGroup layout="block" style="display:block; ">
<h:outputText class="customerVieFooter" value="Created at "/>
<h:outputText class="customerVieFooter" value="#{customerController.customer.createdAt}">
<f:convertDateTime pattern="dd.MM.yyyy" />
</h:outputText>
</h:panelGroup>
</f:facet>
When I run this I am just getting the first outputText because the second does not seem to get the value.
How can I fix this issue?
I am using JSF 2.2 with Primefaces 5.1. There is an editable primefaces datatable with pagination enabled.
<p:dataTable editMode="row"
editable="true"
value="#{usersBean.users}"
var="user" paginator="true" rows="20">
<p:ajax event="rowEditInit" onstart="handleRowEditInit(event,this);"/>
<p:column>
<p:rowEditor/>
</p:column>
<p:column headerText="Real name">
<p:cellEditor rendered="true">
<f:facet name="input">
<p:inputText value="#{user.realName}"/>
</f:facet>
<f:facet name="output">
<h:outputText value="#{user.realName}"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="User name">
<p:cellEditor>
<f:facet name="input">
<p:inputText value="#{user.userName}"/>
</f:facet>
<f:facet name="output">
<h:outputText value="#{user.userName}"/>
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
Every time the page is changed the datatable does an AJAX POST with all the data of the current page. As you can partly see in the image below.
For big tables with much data this results in huge requests. This is not neccessary right? Is there a way to change this behavior?
Indeed, when you submit a form in HTML, by default every single HTML input element will be sent as request parameter. PrimeFaces ajax components therefore offer the partialSubmit="true" attribute which will then send only the HTML input elements covered by the process attribute, which defaults in <p:ajax> to #this and in <p:commandXxx> to #form.
So, just add this to the data table in case to optimize pagination performance:
<p:ajax event="page" partialSubmit="true" />
And add this to any command button which only needs to access the current row in the data table (e.g. to show it in a dialog) to optimize action processing performance:
<p:commandButton ... process="#this" partialSubmit="true" />
You can also configure it globally via below context param in web.xml:
<context-param>
<param-name>primefaces.SUBMIT</param-name>
<param-value>partial</param-value>
</context-param>
And then for cases where you actually need a full submit, explicitly use partialSubmit="false".
Saving a text inside a p:cellEditor > p:inputTextarea works perfectly onblur when clicking outside the cell.
However when clicking on a link (e.g. commandButton, commandLink) coming from a p:cellEditor > p:inputTextarea it does not execute the p:ajax cellEdit event beforehand. It instead executes the clicked link.
This is not correct since it works for p:inputTextarea without a p:cellEditor. I realize this might as well be a Primefaces bug. Any idea how to work around this?
<p:dataTable>
<p:ajax event="cellEdit" listener="#{bean.onCellEdit}" />
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{model.text}" />
</f:facet>
<f:facet name="input">
<p:inputTextarea value="#{model.text}" />
</f:facet>
</p:cellEditor>
<p:dataTable>
<p:commandButton actionListener="#{bean.someOtherAction}" />
I submitted the bug to Primefaces. But is there a workaround for this via javascript/jQuery?
After no success on the Primefaces bug report I ended up hooking up the listener to all of the p:cellEditor instances directly. It seems to work and I'm not losing inputs anymore.
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{model.text}" />
</f:facet>
<f:facet name="input">
<p:inputTextarea value="#{model.text}">
<!-- this is the relevant line -->
<p:ajax listener="#{bean.onCellEdit}" global="false" update="#this" />
<!-- end relevant line -->
</p:inputTextarea>
</f:facet>
</p:cellEditor>
I did quite similar but without <p:cellEditor>. In that mode that did not work for me.
But if you use just
<p:column>
<p:selectBooleanCheckbox value="#{listElement.field1}">
<p:ajax listener="#{bean.saveAction}" global="false" update="#this"/>
</p:selectBooleanCheckbox>
</p:column>
<p:column>
<p:inputTextarea value="#{listElement.field2}">
<p:ajax listener="#{bean.saveAction}" global="false" update="#this"/>
</p:inputTextarea>
</p:column>
</p:dataTable>
This is a clumsy question!!! :)
Can this be made possible somehow? Can <p:dataTable> (whatever lazily loaded or otherwise) be updated without updating its headers (The contents (rows) inside the table along with the footer should be updated without updating the table headers)?
Updating of <p:dataTable> may be triggered by any UICommand like <p:commandButton>, <p:commandLink> and alike.
Something like this can be visualized, when we edit/update rows using <p:cellEditor> in conjunction with <p:rowEditor/> in <p:dataTable> (not sure about single cell editing).
<p:dataTable id="dataTable" var="row" value="#{bean}" ...>
<p:column headerText="Header 1" sortBy="#{row.property1}" filterBy="#{row.property1}">
....
</p:column>
<p:column>
<!--They may be our own headers-->
<f:facet name="header">
Header 2
...
</f:facet>
....
</p:column>
...
</p:dataTable>
Easiest way is to use PrimeFaces Selectors (PFS) for this. This only requires the desired cell content being wrapped in another component with an ID and a style class — so that jQuery can find and collect them.
E.g.
<p:dataTable ...>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col1" styleClass="cell">...</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col2" styleClass="cell">...</h:panelGroup>
</p:column>
<p:column>
<f:facet name="header">...</f:facet>
<h:panelGroup id="col3" styleClass="cell">...</h:panelGroup>
</p:column>
...
</p:dataTable>
<p:commandButton value="update" update="#(.cell)" />
That wrapping is clumsy, yes, but that's best you can get without homebrewing a custom renderer. You can always create a <my:column> tagfile to reduce the boilerplate.
See also:
How do PrimeFaces Selectors as in update="#(.myClass)" work?
I am making a very simple datatable with JSF 2.0 tag dataTable but for some reason the page paginator is not displayed. Why is that?
<p:dataTable var="garbage" value="#{resultsController.allGarbage}" paginator="true" rows="10">
<p:column>
<f:facet name="header">
<h:outputText value="Filename" />
</f:facet>
<h:outputText value="#{garbage.filename}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Description" />
</f:facet>
<h:outputText value="#{garbage.description}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Upload date" />
</f:facet>
<h:outputText value="#{garbage.uploadDate}" />
</p:column>
</p:dataTable>
Use p:dataTable instead of h:dataTable.
The pagination only works with the primefaces dataTable and not with the plain jsf dataTable.
The paginatorAlwaysVisible is an attribute of the primefaces datatable implementation, so you would have to use the datatable tag from the primefaces namespace: p:dataTable.
Edit: Also, you need a h:head element defined in your page, so that the jsf impl knows where to output additional scripts and stylesheets. If that is the case you should be seeing an error message like:
One or more resources have the target of 'head', but no 'head' component has been defined within the view.
To help debuging you could add the following context parameter to your web.xml:
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
#sfrj: You probably need something like this:
<p:dataTable var="garbage" value="#{resultsController.allGarbage}" paginator="true" rows="10" paginatorPosition="bottom" paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="5,10,15,20" paginatorAlwaysVisible="false">
paginator="true" only tells the p:dataTable component that you want the paginator control but you haven't specified what you want in it yet. Hence, you need the paginatorTemplate attribute. The paginatorAlwaysVisible="false" attribute is good aesthetically if your query returns no record - in which case, the paginator section won't be shown if there are no record. Else, it's visible if there is at least one record returned from your query.