Forum:

no automatical rerender of columns in p:dataTable after ajax call

Ranch Hand

Posts: 41

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hello

I have a p:dataTable with 3 columns and one of the columns is editable. When the user edits this column some calculations happen and the value of another column and a field in the footer should change.
This all functions except that column b does only get rerendered after clicking in the window or changing the tab, not automatically.

<?xml version='1.0' encoding='UTF-8' ?>
<!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:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:pe="http://primefaces.org/ui/extensions">
	<h:head>
	</h:head>
<h:body>
	<p:growl id="dialoggrowl" showDetail="true" globalOnly="false" autoUpdate="true" />
	<h:form id="basketform">
		<p:dataTable id="articletable" value="#{userBean.newOrder.items}" var="uo"
			selectionMode="single" rowKey="#{uo.articleId}" widgetVar="dt"
			editable="true" editMode="cell">
			<p:column headerText="Titel">
				<h:outputText value="#{uo.article.title}" id="modelTitleInput" />
			</p:column>
			<p:column headerText="Anzahl">
				<p:cellEditor>
					<f:facet name="output">
						<h:outputText value="#{uo.quantity}" id="modelQuantityInput" />
					</f:facet>
					<f:facet name="input">
						<pe:inputNumber value="#{uo.quantity}" minValue="1" maxValue="99">
							<p:ajax update="@form" />
						</pe:inputNumber>
					</f:facet>
				</p:cellEditor>
			</p:column>
			<p:column headerText="Preis">
				<h:outputText value="#{uo.totalPrice}€" id="modelPriceInput" />
			</p:column>
			<p:columnGroup type="footer">
				<p:row>
					<p:column colspan="2" style="text-align:right" footerText="Total:">
						<h:outputText />
					</p:column>
					<p:column id="totalsum" colspan="1" style="text-align:right" footerText="#{userBean.newOrder.sumPrice}€"> 
						<h:outputText  />
					</p:column>
				</p:row>
			</p:columnGroup>
		</p:dataTable>
		<p:commandButton id="dlgbut" value="Bezahlen" 
		   							action="#{userBean.purchaseOrder}" />
	</h:form>
</h:body>
</html>

In line 26 there is the inputcomponent to change the quantity and in the setter of the quantity actions get triggered to change totalsum and modelPriceInput
I guess that the values are in the table, but the rendering only starts after a click anywhere on the page.
I have also tried

instead, but this does not change the footer at all, even after a click on the page.
I want this rendering without additional user input. Maybe someone knows what to do here!

regards, michael

Tim Holloway

Saloon Keeper

Posts: 28324

210

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Try re-rendering the entire articleTable. Sometimes fine-grained re-rendering doesn't work because either the actual ID you need on the component isn't what your think it is (due to relative ID paths) or in some cases, the underlying HTML doesn't allow for such detailed updating.

Education won't help those who are proudly and willfully ignorant. They'll literally rather die before changing.

Michael Oberleitner

Ranch Hand

Posts: 41

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Tim,

i tried it now with

but it behaves the same as

Michael Oberleitner

Ranch Hand

Posts: 41

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

And this behavior is just in firefox, in chrome all is fine rendered without additional click.

Tim Holloway

Saloon Keeper

Posts: 28324

210

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

When you say that re-rendering at the table level is the same as re-rendering as the form level do you mean that both levels work or that both levels do not work?

I haven't done AJAX with PrimeFaces, but usually you have to have some way to attach the AJAX action to a specific control event. I think, for example, that the control update event may not get fired until you explicitly submit the form. Usually you'd tie the AJAX to something like the control's blur event.

Education won't help those who are proudly and willfully ignorant. They'll literally rather die before changing.

Michael Oberleitner

Ranch Hand

Posts: 41

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Both attempts with

and

work just on chrome and internet explorer. On firefox it's just the same that the user has to click in the page to trigger the changes to the calculated fields get visible.

Now I try to solve the isssue with a ValueChangeListener on pe:inputNumber but I'm not sure if this will work.

Tim Holloway

Saloon Keeper

Posts: 28324

210

I like...

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

A valueChangeListener is not AJAX-driven nor is it related to any of the JavaScript events. A valueChangeListener fires when a form is submitted AND the associated control data value changed. It does not initiate a submit on its own.

The "blur" event is a JavaScript (client-side) event that fires when you exit the control and move the input focus somewhere else. It's the most common tracker for controls that don't monitor for keystroke events, since a JavaScript update event can capture intermediate invalid values. And, yes, I think the "update" JavaScript event does have a reputation for odd behavior on different platforms.

Education won't help those who are proudly and willfully ignorant. They'll literally rather die before changing.

Michael Oberleitner

Ranch Hand

Posts: 41

posted 8 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I tried this now

but still the same :banghead:

when your children are suffering from your punishment, tell your them it will help them write good poetry when they are older. Like this tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing