Why aren't the Primefaces components rendered properly on partial page update?
The problem is -
I have a view with ui:include -
<ui:include src="#{navBean.viewId}.xhtml}"/>
and p:commandButton -
<p:commandButton action="#{navBean.setViewId('page1')}" value="Load DataTable"/>
and page1.xhtml is where I have a p:dataTable
<ui:composition xmlns ...
<h:head/>
<h:form>
<p:dataTable ...
Now, when I click on the command button, partial update takes place and everything is loaded but the data table is not rendered properly.
Does anybody here know how to get around this problem?
I went through some of the topics in the Primefaces forum but they didn't do any good.
Thank you.
Solution was simple -
Just include a
<h:head/>
as follows -
<ui:composition xmlns ...
<h:head/>
<h:form>
<p:dataTable ...
And now the p:dataTable renders as it is supposed to even on partial page update.
Related
I've been facing some problems using JSF with AJAX to render a table without reloading the whole page every time I submit a form.
When I first run the server, my database is empty, so the page is supposed to show only a form to add books. When user submits the form, a fieldset whith all books is supposed to be rendered. I don't want this fieldset to be shown when database is empty.
This is a simple version of my code (it is just a small form and a table to be refreshed using AJAX):
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
<h:graphicImage library="img" name="caelum-logo.png"/>
<h:form>
<p>Book Title:</p>
<h:inputText id="title" value="#{livroBean.livro.titulo}" />
<h:commandButton value="Add book" action="#{livroBean.addFirstBook}">
<f:ajax execute="#form" render="title :addedBooksTable" />
</h:commandButton>
</h:form>
<div id="addedBooksTable">
<p:fieldset rendered="#{livroBean.numberOfBooks > 0}">
<h:dataTable value="#{livroBean.allBooks}" var="book">
<h:column>
<h:outputText value="#{book.titulo}" />
</h:column>
</h:dataTable>
</p:fieldset>
</div>
</h:body>
</html>
And i wanna focus on this part:
<h:commandButton value="Add book" action="#{livroBean.addFirstBook}">
<f:ajax execute="#form" render="title :addedBooksTable" />
</h:commandButton>
The fieldset and the table inside it are supposed to be hidden when there's no book added to the database, that's why i used <p:fieldset rendered="#{livroBean.numberOfBooks > 0}">. But I want it to be rendered after I click the commandButton, even if there's nothing at the inputText.
Here's what's happening when I test the code:
if I test the code just as it is with an empty database, the inputText is refreshed (it "erases" what were typed before the submisssion) when I click on the commandButton, but the fieldset is not. I know that the fieldset has a rendered="#{livroBean.numberOfBooks > 0}" and the inputText does not, but the method getNumberOfBooks is called everytime i click the commandButton, that's why I don't get it...
if I change the f:ajax tag so it ends up like this <f:ajax execute="#form" onevent="click" render="title :addedBooksTable" />, it solves the problem, but i can realize the screen flashing for a while when I click the commandButton. As far as I know, one of the uses of AJAX is that we don't want the screen flashing when a request is made.
Why is the fieldset rendered only when I use onevent="click"? Should I consider the flashing something normal? Is there a more elegant solution for that?
Thanks!
You can't ajax-update a plain HTML element. You can only ajax-update a JSF component. Simple reason is that the target must be resolveable by UIViewRoot#findComponent(), so that JSF can find it in the component tree and render the updated HTML into the Ajax response.
Replace
<div id="addedBooksTable">
by
<h:panelGroup layout="block" id="addedBooksTable">
Normally, this should have thrown an exception as described in How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar", but they removed this check in Mojarra 2.2.5 in order to support ajax-updating a specific iteration of <ui:repeat> and <h:dataTable> (this missing check will be fixed later on as that's indeed unhelpful to starters like you).
As to why adding onevent="click" appear to work, that's because it caused a JavaScript error which in turn caused the whole JavaScript/Ajax thing to break down, which in turn caused that the command button fall backs to default synchronous behavior with a full page reload (as if you aren't using <f:ajax> at all). You likely meant to use event="click" instead. The onevent attribute serves a different purpose. See also a.o. Proccess onclick function after ajax call <f:ajax>.
I have primefaces datatable
<p:dataTable ...>
<p:ajax event="rowSelect" update=":previewDataForm" oncomplete="$('.previewDataModal').modal();"
immediate="true">
</p:ajax>
</p:dataTable>
And modal in which I would like to display PDF (b tag is bootsfaces)
<b:modal id="previewDataModal" title="Preview" styleClass="orderPreviewModalPseudoClass">
<h:form id="previewDataForm">
<pe:documentViewer height="550" value="#{contentStreamHelperBean.pdfFromFileSystem}" rendered="#{previewMB.renderPreview}"/>
</h:form>
</b:modal>
I have problem with displaying it in case on ajax call from dataTable. When I have attribute update=":previewDataForm" on rowSelect then PDF is displayed, but it's rendered twice and buttons in documentViewer are not responding. When I remove update=":previewDataForm" from rowSelect documentViewer is not rendered.
When I invoke this modal with commandButton, then everything works ok.
Is there way how to render previewDataForm only once and then display it from ajax?
Thanks
The modal is rendered when the page is displayed first. In other words, it's rendered before the user has selected a row. I suggest you add a rendered= condition to the <h:form> tag to prevent the initial rendering of the PDF file. My guess is that the PDF file can't be rendered because no row has been selected (typically a NullPointerException), and that this leads to follow-up errors.
h:inputText is not working in the latest JSF2.2 with multiple forms.
I have 2 forms
form1 have:
one command button and one input text
form2 has:
one input text and one output label
on click of command button in form1, i am rendering the form2(both outputlabel and input text).
but only output label is rendered properly with correct values (corresponding getter method gets called and value is displaying) but the input text is not calling the corresponding getter method hence showing null.
Note:
we noticed this issue only if we use multiple forms, within single form its working fine.
also it worked fine in JSF2.0
Version used:
JSF api - 2.2 (com.sun.faces)
JSF impl - 2.2 (com.sun.faces)
let me know if anyone have solution to handle this.
the forms are not nested and both the beans are in View scope.
<h:form id="form1">
<a4j:commandLink id="actionEdit" title="Click" action="#{bean.action}"
render="paymentInstructionDetail" styleClass="iconLarge edit" />
</h:form>
<h:form id="form2">
<a4j:outputPanel ajaxRendered="true" id="paymentInstructionDetail">
<h:inputText value="#{bean1.amount}" id="sample"/>
<h:outputLabel value="#{bean1.amount}" id="sampleLabel"/>
</a4j:outputPanel>
</h:form>
after the action is completed in form1, the form2 outputlabel is displaying the value properly(getter method is called) but the inputtext is not displaying the value (getter method is not getting called)
Hi john, to test whether the above issue is working fine without richfaces, i created a standalone project and create a xhtml as below
<h:body>
<h2>This is start.xhtml</h2>
<h:form>
<h:commandButton action="#{myBean.testAction}" value="Payment" >
<f:ajax render="sample"></f:ajax>
</h:commandButton>
</h:form>
<h:form id="test12" prependId="false">
<h:inputText value="#{myBean.orderQty}" id="sample"/>
</h:form>
</h:body>
but i am getting unknown id for sample, is there any way to check with multiple forms?
I am not familiar with richfaces (a4j), but try the following:
-If you don't use form prependId=false, then you should refer to your (other form) id's as: render=":form2:paymentInstructionDetail" styleClass="iconLarge edit" />
On another note:
-I don't think that richfaces is JSF2.2 ready yet, so expect problems
-Actually, JSF 2.2 has quite a few bugs of it's own
I'm using primefaces inline editing datatable.which consists of primefaces RowEditor and a CommandButton to delete the record.My Problem is when i deleted any record from the the database,the row is successfully deleted and the deleted record is showing when i click on the edit button for editing the next record.This edit problem continues with all the records .It is showing the present value in h:outputText and the old value in h:inputText which comes when we click on edit button.
Could anyone help me on this ?
Thankyou all.
There are a lot of Primefaces bugs logged on the <p:dataTable> component, so I am not going to search through all of them.
I do know however that there is an open bug as of Primefaces 2.2.1 stating that components within a row of a <p:dataTable> will not correctly update (refresh) the appropriate values within the dataTable. This problem MAY be fixed in Primefaces 3.0. If you are interested you can search the known bugs here.
Fortunately I have figured out a workaround for this. You need to perform an asynchronous operation from a component OUTSIDE of the <p:dataTable> and make sure that component sets the id of the dataTable in its update attribute.
<h:form id="form1">
<p:commandButton widgetVar="updateButton" update="form1:table1" ... />
<p:dataTable id="table1" ...>
<p:column ...>
<p:commandButton id="deleteButton" action="#{managedBean.doDelete}" oncomplete="javascriptFunction();" ... />
</p:column>
</p:dataTable>
</h:form>
And in a javascript:
function javascriptFunction() {
updateButton.jq.click();
}
Have review(for adding review or comments) component in my application.
When add review, that p:dataTable is updated with ajax.
before adding review:
after adding first review
refresh page(F5):
after adding second review:
jsf:
<h:form onsubmit="return commValidator();">
<h:inputText value="#{comment.commentator}"/>
<h:inputTextarea value="#{comment.body}";"/>
<p:commandButton value="send" action="#{showProducts.addComment}" update="comms"/>
<p:dataTable id="comms" value="#{showProducts.comments}" var="com">
<p:column>#{com.commentator}(
<h:outputText value="#{com.postDate}">
</h:outputText>):
</p:column>
<p:column>#{com.body}</p:column>
</p:dataTable>
</h:form>
The problem is p:dataTable component is displayed twice on page.
After new review been added, that newly created p:dataTable displayed.
How to make p:dataTable displayed already after go to page and once time?
Thanks.
p:dataList component resolves this problem
It displays ones and new elem. is added to already existing list instead of creating new one list as with p:dataTable!
forum
I encountered the same problem: p:dataTable inside form is duplicated, each time an update(:form) is made.
One possibility to solve the problem is to put a p:outputPanel as major element inside the form which contains all other elements.
When simply doing an update(:form:outputpanel) the table is update BUT not duplicated anymore.