Primefaces dataTable is duplicated on page - datatable

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.

Related

JSF cannot update single form in ui:repeat from outside

I have two problems which are closely related:
I need to update a form inside a tag inside ui:repeat from a dialog at the main page and cannot figure out how (because there are many tags in the ui:repeat and I need to update only one)
naming containers are messed up and lose their "index" when I use id in that form (in case of trying to determine the update path expression...)
reason I need this: updating the 'wholelist' (current situation) breaks all <p:calendar> inside the <p:dialog> somehow (no errors...) (the calendar overlay shows at the first time, but after updating the list it does not appear any more (must reload page again). Also I don't want to update 100 elements each time if only one can be changed
page.xhtml
<h:panelGroup id="wholelist">
<ui:repeat var="entry" value="#{bean.foundEntries}" id="repeatId">
<customTag:someTag entry="#{entry}" />
</ui:repeat>
</h:panelGroup>
...
<p:dialog widgetVar="dialog" id="dialog">
<p:calendar value="#{bean.date}" ... /> <!-- overlay pops up on select until the whole list is refreshed. after that it does not appear until page reload -->
<p:commandButton actionlistener="#{bean.saveSomething()}" update="#{bean.componentToUpdate WHICH DOES NOT WORK...}"/>
</p:dialog>
someTag.xhtml
and within the <customTag:someTag> (which is a tag because of multiple reuses) :
...
<h:form>
... display a lot of data which can be changed by the dialog...
<p:commandButton value="show edit dialog" onComplete="PF('dialog').show()" update=":dialog">
<f:setPropertyActionListener value="??? (#form does not work)" target="#{bean.componentToUpdate}" />
</p:commandButton>
</h:form>
First Question:
I need to refresh one single form from the dialog (=the dialog which needs to know which form I want to refresh, and I have no idea how to do so...)
And how can I get the update-logic working (pass the component to update to the bean so the dialog knows what to update or equal)?
Second Question:
why does JSF generate in case of not defining a id="..." to a naming container within a ui:repeat something like
repeatId:0:j_id_c0_6
repeatId:1:j_id_c0_6
repeatId:2:j_id_c0_6
and when I define a id to the form (<h:form id="formname">) something like
repeatId:formname
repeatId:formname
repeatId:formname
which causes duplicateId (because the lack of the "iterator-number" in the name)?
Does this make sense?
I have solved it; error was elsewhere: I have forgotten in an included tag file which caused the js warning (which broke the calendar).
many thanks

jsf 2.0 update specific element inside ui:repeat

I'm asking how I can achieve updating a specific element of a loop?
e.g.
<h:form>
<ui:repeat var="element" value="#{bean.elements}" varStatus="status">
<h:outputtext value="#{element.text}" id="#{element.id}" />
<p:commandLink update="#{element.id}" >
<h:outputtext value="UpdateTextField #{element.id}" />
</p:commandLink>
</ui:repeat>
</h:form>
I know that status.index doen't work since its view-rendered. Also the "dynamic" index-setting also doen't work since its view-rendered... But how can i achieve that when the button is clicked, it updates (ajax) the outputtext? Is this only possible with c:forEach?
its ViewScoped and the form must be outside of the loop. otherwise i would solve it with update="#form", but here its not possible
thanks for any help!
Since both ui:repeat and c:forEach generate different dynamic Component Ids for the elements you can't Guarantee the update an individual Item out of all generated items from outside.
I think best approach for this kind of problem would be placing a h:panelGroup around ui:repeat or c:forEach itself and update the h:panelGroupitself.

Primefaces: Update (refresh) p:panel inside p:rowExpansion

I have the following configuration:
JSF: Apache MyFaces JSF-2.1 Core API (Version: 2.1.10)
PrimeFaces 3.4.2
Tomcat 7.0.35
I have a DataTable with rowExpansion and a panel with button in the rowExpansion. I would like to refresh only the panel inside the rowExpansion when the user clicks on the button.
<p:dataTable id="vmt" var="vmtemplate" value="#{myViewBean.myList}" rowKey="#{vmtemplate.id}">
<p:ajax event="rowToggle" listener="#{myViewBean.onRowToggle}" update=":growl" />
<p:column style="width:2%"><p:rowToggler /></p:column>
<p:column>...</p:column>
<p:rowExpansion>
<p:panel id="exp_panel" header="#{vmtemplate.name} Instances">
<h:form id="instancesForm">
<p:commandButton id="refreshRowExpPanel" title="Refresh" update=":growl" action="#{myViewBean.reloadData}"/>
</h:form>
</p:panel>
</p:rowExpansion>
</p:dataTable>
I think I have to set the update property of the refreshRowExpPanel button in order to refresh the exp_panel, but when I set it to update=":growl :expanel" I get an error:
Cannot find component with identifier ":expanel" referenced from
"mainForm:vmt:0:refreshRowExpPanel".
so the generated ID of the panel is "mainForm:vmt:0:refreshRowExpPanel", but when I specify this to the update (update=":mainForm:vmt:0:refreshRowExpPanel") I got the same error:
Cannot find component with identifier
":mainForm:vmt:0:refreshRowExpPanel" referenced from
"mainForm:vmt:0:refreshRowExpPanel".
with update=":mainForm" it works, but it refreshes the whole dataTable and my expanded row will be closed, so it's not fine.
Could you please suggest a solution how to refresh only my panel inside the rowExp, maybe from JS, or any other idea?
thx!
I recommend you to try using ID of the panel without colon on the beginning, so:
update="mainForm:vmt:0:refreshRowExpPanel"
Also you may like to read this post about making references.
I've just realized, that I had a form outside my dataTable:
<h:form id="outerForm">
<p:dataTable id="vmt" var="vmtemplate" value="#{myViewBean.myList}" rowKey="#{vmtemplate.id}">
pansion>
...
</p:dataTable>
</form>
by removing the outer form, and changing the update value to "#form" solved the problem

How to submit JSF PrimeFaces form with selectBooleanCheckbox without refreshing the page?

I'm using JSF with PrimeFaces to make an application as an assignment for college. I'm struggling to get something working. I'm using PrimeFaces and I have a tabview which contains 5 tabs. In one of those tabs I have a dataTable which has several rows and columns. This all works fine, but the problem is that I want to submit the form without rerendering the (entire page). The thing is, every column in the dataTable has a selectBooleanCheckbox, and when that checkbox is selected, a button should disappear. If it's unselected the button should appear. This works fine with onchange="this.form.submit()" or onclick="this.form.submit()" but it refreshes the entire application, and it causes the first tab to be selected, rather than the one I was at. So I'm looking for a solution to be able to submit and re-render some stuff without refreshing the entire program. This is my code:
<body>
<h:form id="customerForm">
<p:dataTable id="customerlist" var="c" value="#{customerBean.customerList}">
<p:column>
<f:facet name="header">Select</f:facet>
<center>
<p:selectBooleanCheckbox value="#{c.selected}" onchange="this.form.submit()"/>
</center>
</p:column>
</p:dataTable>
<h:commandButton id="testtest" value="test" rendered="#{customerBean.numberSelected() == 0}"/>
</h:form>
</body>
I removed most of the columns for the sake of simplicity. What is the solution to this? I've tried using ajax, but that didn't work
<p:selectBooleanCheckbox value="#{c.selected}">
<f:ajax event="click" execute="#form" render="#none"/>
</p:selectBooleanCheckbox>
Do you really need to submit the whole form? If it's enough that the view is being rerenderd try just to update the form. For that you can use the primefaces ajax event.
<p:selectBooleanCheckbox value="#{c.selected}">
<p:ajax update="#form"/>
</p:selectBooleanCheckbox>
If this does not work, please tell us what "..ajax, didn't work" exactly mean. Is there any POST Request submitted? Is any Action/Setter called?

Primefaces Inline DataTable Delete functionality

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();
}

Resources