I have a primeface datatable as follows
<p:dataTable id="associatedProductsTable" var="oap"
value="#{checkoutController.associatedProducts}"
styleClass="cssAssociatedProductsTable">
<p:column>#{oap.product.code}</p:column>
<p:column>
<p:selectBooleanCheckbox value="#{oap.includedInOrder}" />
</p:column>
<p:column>#{oap.productPriceTotal}</p:column>
</p:dataTable>
the productPriceTotal field is 0 as long as selectBooleanCheckbox is unchecked. My desire is to set the value of productPriceTotal when user selects the checkbox value of selectBooleanCheckbox
I do not care if this is happening with a postback or dynamically ajax, but no matter how I am doing it I canot get it working.
Thanks
I have done it. Actually I was looking for an example, for some documentation to make it easier for me.
It works now very nice.
The problem was that the update of the table was supposed to be done only once at page load, and I was not doing this. I was loading the data each time on each refresh, so of course, no matter what i was changing, the data was wiped out, by the reload.
if (!FacesContext.getCurrentInstance().isPostback())
{
//load once
}
It works now
Thanks
Related
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?
We are using Richfaces 4.1.0, and I am trying to use an extendedDataTable. I started (for simplicity's sake) with dataTable. The code below works fine, and shows my data in a table, as expected.
<rich:dataTable value="#{recipientBean.recipientList}" var="recipient" selectionMode="none" id="recipientTable">
<rich:column sortable="false" id="col_1" label="Name">
<f:facet name="header">
<h:outputText value="Name" id="name" />
</f:facet>
<h:outputText value="#{recipient.name}" id="rec_name" />
</rich:column>
<!-- More columns below, removed for post brevity -->
</rich:dataTable>
We are expecting a large number of records, so we would like the table to be scrollable. I thought that I could just change the dataTable to extendedDataTable, however, when I do that, no data shows up at all.
I just started to inspect the element in Chrome, and all of a sudden the data showed up. So when I inspect the element, I see the values in the html, but they don't display when the page loads.
Could this be a style issue? An attribute that is missing (something that is needed for extendedDataTable, but not needed for dataTable)?
What else am I missing?
EDIT: I do have this extendedDataTable inside a rich:tabPanel. When I remove the rich:tabPanel it displays correctly (but I really need the tabPanel). Is this a known issue?
EDIT2: It does display correctly if it is on the first tab of the rich:tabPanel.
I found a bug report on the joss site. The work around was to use the switch type of Ajax instead of client for the tab panel.
If it still doesn't work after switching to ajax switchType you may try to use redirect instead of forward, when you navigate to the page with rich:extendedDataTable. To achieve this you may e.g. add ?redirect-faces=true to the page URL.
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.
I have dataTable in my page. Initially I want it to be hidden, and show after fetching data by AJAX request. I know how to fetch data and put into table, but I don't know how to show table if it is hidden. Here is the code:
<h:commandButton value="aa">
<f:ajax execute="from to validTo" render="transportOffers"/>
</h:commandButton>
<p:dataTable id="transportOffers" value="${cargoOffer.transportsForCargo}" var="transport">
<p:column>
<h:outputText value="${transport.company}"/>
</p:column>
</p:dataTable>
Table is visible initially, even if it is empty. If I set rendered="false" it is invisible, and remains invisible also after AJAX request.
How can I make it hidden initially, and to show up after populating with data?
You could try having the dataTable to render conditionally based on the size of the list:
rendered = "#{cargoOffer.transportsForCargo.size() != 0}"
I think if rendered=false then the element isn't created, so the AJAX request can't find it.