How can I update twice during JSF Ajax event - ajax

Given the following code:
<p:column headerText="#{text.article}">
<h:panelGroup>
<p:autoComplete id="relationArticle"
value="#{relation.article}"
completeMethod="#{articleRelationsModel.findArticles}"
queryDelay="#{text.query_delay}"
minQueryLength="#{text.artikkel_min_query_length}"
var="article"
itemLabel="#{article.articleNo} #{article.text1}"
itemValue="#{article}"
converter="#{articleConverter}"
scrollHeight="150"
forceSelection="true"
styleClass="ui-autocomplete-big">
<p:ajax event="itemSelect" update="relationUnit" process="#this"/>
</p:autoComplete>
<p:message for="relationArticle"/>
</h:panelGroup>
</p:column>
<p:column headerText="#{text.unit}" style="width: 80px;">
<h:selectOneMenu id="relationUnit" value="#{relation.unit}" converter="#{articleUnitConverter}">
<f:selectItem itemLabel="<< #{text.search}" noSelectionOption="true" itemDisabled="#{relation.article != null}"/>
<f:selectItems value="#{articleRelationsModel.getUnits(relation)}" var="unit" itemLabel="#{unit.code}" itemValue="#{unit}"/>
<p:ajax event="change" process="#this" update="#this"/>
</h:selectOneMenu>
<p:message for="relationUnit"/>
</p:column>
How can I refresh the "relationUnit" component after the user has selected a value in the "relationArticle" component?
What happens now, is that after the autcompete itemSelect event has fired, the "relationUnit" component gets updated with new content using #{articleRelationsModel.getUnits(relation)}. During this update, the relation object is updated with one of the options from the resulting list. This, however, is not reflected in the "relationUnit" component after the update. But if I manually do another update after this, it gets selected.
How can I achieve the wanted result here?

You can use p:remoteCommand, which is usually used to call the ManagedBean Methods from Javascript.
While it serves the above purpose you can use it to update other components also.
You can call the p:remoteCommand from p:ajax's oncomplete attribute.
<p:autoComplete id="relationArticle" ...>
<p:ajax event="itemSelect" update="relationUnit" onComplete="updateRelationUnit()" process="#this"/>
</p:autoComplete>
<p:remoteCommand name="updateRelationUnit" update="relationUnit" process="#this" />
Now p:ajax will update relationUnit once and then calls the p:remoteCommand which in-turn relationUnit again.
I don't know why you want this strange behavior, but the above strategy and code servers your purpose just fine.

Related

Field validation applies to all the component within the ui:repeat

i'm using JSF 2.2.8 and primefaces 6.0 and I'm trying to update an element in my form. When i run my XHTML everything is displayed correctly but unfortunately when I start to input data in the input fileds it does'nt let me input data and the input mask is applied to each input and by displaying a message you must indicate a value and the fields are not required
Here is the screen of my view
http://imgur.com/a/e5avV
and here is the code which causes the problem
<h:form>
<ui:repeat value="#{etpBean.affectations}" var="affectation">
<ui:repeat var="activite" value="#{etpBean.activites}">
<p:inputText value="#{etpBean.getValeurActivite(affectation,activite).etp}">
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle1')}" event="blur" />
</p:inputText>
</ui:repeat>
<ui:repeat var="projet" value="#{etpBean.projet}">
<p:inputText value="#{etpBean.getValeurActivite(affectation,projet).etp}">
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle1')}" event="blur" />
</p:inputText>
</ui:repeat>
<h:outputText id="controle1" value="#{affectation.message}"/>
</ui:repeat
</h:form>
I tried to add the process in but it does not work.And what I do not understand why the validation is triggered while I have not yet submit the form.
There is an implicit #{component} object in the EL scope that evaluates to the current UI component.
try this
<p:ajax listener="#{etpBean.onControleChange(affectation)}" process="#this" update=":#{p:component('controle')}" event="blur" />

p:selectOneRadio not updating model in event "change" with p:ajax

I'm using an p:selectOneRadio with p:ajax and the value of another component (p:inputText), not binding its value in my bean.
If I use p:selectBooleanCheckbox instead the behavior is exactly what I need, update the bean before calling the method in ajax. Is this a bug in p:selectOneRadio or is this its default behavior?
I'm using JSF2, PrimeFaces 4
The xhtml code:
<p:selectOneRadio id="enumId" value="#{xyzController.entity.enumValor}"
disabled="#{disabled}" required="true" plain="true">
<f:selectItems value="#{xyzController.enum}" var="item"
itemLabel="#{messages[ELUtils.evaluateExpression(itemLabelEL)]}"
itemValue="#{item}" />
<p:ajax event="change" listener="#{xyzController.aoTrocar}"
update="panelDominioFields" process="#form" />
</p:selectOneRadio>
<p:outputPanel layout="inline" id="panelDominioFields">
<p:inputText id="valorId"
value="#{xyzController.entity.valorNumericoValido}"
rendered="#{xyzController.mostrarCampoDominioNumerico}"
required="true">
<f:convertNumber type="number" locale="#{localeController.locale}"
currencyCode="#{localeController.currencyCode}" />
</p:inputText>
</p:outputPanel>
Get rid of event="change", it's the wrong event. It defaults to click and is the right one already.
<p:ajax listener="#{xyzController.aoTrocar}"
update="panelDominioFields" process="#form" />
Radio button values never change. They're only selected by click. In turn, selected values are submitted, but unselected values not.

rich:calendar not triggering f:ajax

I'm new to jsf, and I'm writing my first application using richfaces. I'm having trouble with the ajax tag that I use to update the associated managed bean property on server for rich:calendar components. This is the code:
<rich:panel header="Computing Options">
<h4>Time Interval</h4>
<h:panelGrid columns="4" width="100%">
<h:outputText value="From" />
<rich:calendar id="intervalFrom" value="#{scenarioEditor.intervalFrom}" popup="true" showApplyButton="true" datePattern="yyy-MM-ddTHH:mm">
<a4j:ajax execute="#this" event="change" render="outFrom" />
</rich:calendar>
<h:outputText value="To" />
<rich:calendar id="intervalTo" value="#{scenarioEditor.intervalTo}" popup="true" showApplyButton="true" datePattern="yyy-MM-ddTHH:mm">
<a4j:ajax execute="#this" event="change" render="outTo" />
</rich:calendar>
<h:outputText id="outFrom" value="From: #{scenarioEditor.intervalFrom}" />
<h:outputText id="outTo" value="To: #{scenarioEditor.intervalTo}" />
</h:panelGrid>
<h4>Algorithms</h4>
<h:panelGrid columns="2">
<h:selectBooleanCheckbox value="#{scenarioEditor.visibilityClashes}" id="clash" >
<f:ajax execute="#this"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="Visibility Clashes Evaluator" for="clash" style="width:170px" />
<h:selectBooleanCheckbox value="#{scenarioEditor.xBandInterference}" id="xband" >
<f:ajax execute="#this"/>
</h:selectBooleanCheckbox>
<h:outputLabel value="X-Band Interferences Evaluator" for="xband" style="width:170px"/>
</h:panelGrid>
</rich:panel>
checkboxes works fine, but the calendars do not. Why? I`ve tried both f:ajax and a4j:ajax without luck.
To better clarify, I want that right after the user has finished entering a value into the calendar, an ajax request is made that call the setter method for the associated property. And this, for the calendar does not happen while for the checkboxes, it does.
The ajax event is failing because of T in datePattern="yyy-MM-ddTHH:mm" is not a valid date formatting pattern. If you add a <rich:messages/> component to your field, you'll see that a conversion error is occurring on each ajax request. Remove the T and you'll be fine

Datatable not refreshing with ajax

I have two calendar controls and one command button. basically i want to give a range of date to pick the data from the database and then when i press the command button the datatable is displayed in the dialog box, the problem is java bean class is working it is loading the exact data which i want, but the datatable is not refreshing with command button click
my code is given;
<h:form id="form" >
<p:calendar value="#{calendarBean.dateFrom}" id="calFrom" pattern="yyyy-mm-dd">
<p:ajax event="dateSelect" listener="#{calendarBean.handleDateSelectFrom}" />
</p:calendar>
<p:calendar value="#{calendarBean.dateTo}" id="calTo" pattern="yyyy-mm-dd">
<p:ajax event="dateSelect" listener="#{calendarBean.handleDateSelectTo}" />
</p:calendar>
<p:commandButton value="Submit" action="#{calendarBean.submit()}" update="fTable" onclick="aDlg.show()">
<f:ajax render=":form:fTable" execute="#form"></f:ajax>
</p:commandButton>
<p:dialog id="aDialog" header="Filter List" widgetVar="aDlg"
modal="true" showEffect="explode"
hideEffect="explode" >
<p:panel id="pnl">
<p:dataTable id="fTable" value="#{calenderBean.list}" var="row" >
<p:column headerText="ID">
<h:outputText value="#{row.ID}"/>
</p:column>
<p:column headerText="Name">
<h:outputText value="#{row.Name}"/>
</p:column>
<p:column headerText="Time">
<h:outputText value="#{row.Time}"/>
</p:column>
<p:column headerText="User">
<h:outputText value="#{row.userName}"/>
</p:column>
</p:dataTable>
</p:panel>
</p:dialog>
</h:form>
kindly guide me regarding this issue
First thing to do, is remove the f:ajax, it's not working good with Primefaces. Also the update attribute should do everything.
This said, I have the very same code as yours which is working good.
If removing f:ajax is not working, try to check your managed bean scope (May be it's of request scope and data is re-initialized with every request)
Try Updating the dialog instead.
update="fTable"

selectBooleanCheckbox ajax event fires but the listener is never executed

The selectBooleanCheckbox ajax event fires but the listener is never executed.
If I remove the c:forEach and just call the first one in the list it works.
<p:selectBooleanCheckbox value="#{Controller.graphFilter.get(0).checked}" >
<p:ajax listener="#{Controller.addMessage}" />
</p:selectBooleanCheckbox>
notes:
graphFilter is a list where container has the sets/gets for checked and description.
controller is a viewscoped managed bean.
addMessage public function that puts a message for the growl.
Everything is in the same form.
<h:form id="form" prependId="false">
<p:growl id="growl" showDetail="true"/>
<c:forEach items="#{Controller.graphFilter}" var="Gc">
<h:outputText value="#{Gc.description}" />
<p:selectBooleanCheckbox value="#{Gc.checked}" >
<p:ajax listener="#{Controller.addMessage}"/>
</p:selectBooleanCheckbox>
</c:forEach>
</h:form>
You should wrap your components with a p:column:
<p:column>
<h:outputText value="#{Gc.description}" />
<p:selectBooleanCheckbox value="#{Gc.checked}" >
<p:ajax listener="#{Controller.addMessage}"/>
</p:selectBooleanCheckbox>
</p:column>
But replacing the whole structure with a p:dataList would be more elegant.

Resources