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.
Related
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" />
I have 2 dialogs on a xhtml page:
<p:dialog width="400" id="dialog1" header="Download" widgetVar="dialog1">
<h:outputText value="Field1"/>
<h:inputText value="#{backingBean.field1}"/>
<br/>
<h:outputText value="Field2"/>
<h:inputText value="#{backingBean.field2}"/>
<br/>
<p:commandButton value="Download" ajax="false" onsuccess="PF('diaglog1').hide();">
<p:fileDownload value="#{backingBean.file}"/>
</p:commandButton>
</p:dialog>
<p:dialog width="400" id="dialog2" header="Send" widgetVar="dialog2">
<h:outputText value="Field1"/>
<p:inputText value="#{backingBean.field1}"/>
<br/>
<h:outputText value="Field2"/>
<h:inputText value="#{backingBean.field2}">
<p:ajax update="somePanel"/>
</h:inputText>
<br/>
<h:outputText value="Recipient"/>
<h:panelGroup id="somePanel">
<p:selectOneMenu style="width: 100%;" var="recipient">
<f:selectItems value="#{backingBean.someList}"/>
</p:selectOneMenu>
</h:panelGroup>
<br/>
<p:commandButton value="Send" actionListener="#{backingBean.sendSomething}" onsuccess="PF('dialog2').hide();">
<f:attribute name="item" value="#{recipient}"/>
</p:commandButton>
</p:dialog>
They have different functionality but are on the same page and using the same backing bean. Only one dialog can appear at a time. The problem is when I input some value into the first dialog and press 'Download', it will update the field1 and field2 of the backing bean to the value that I want, but after that the second dialog also updates it to its value, which causes the first one to download the wrong file. If I remove the second dialog, the first will behave correctly.
How do I stop the second dialog from updating the values?
I guess you are keeping both dialogs in one single h:form component.
Then obviously submit in one dialog will submit fields in both dialogs coz, they are in same form.
Don't keep p:dialog inside a h:form, instead use h:form inside
dialog.
You can use multiple h:form s in a page there is no harm in
that, but should not use one h:form in another.
Decide how many forms you can use, based on your design and functionality, In your case you can use 2 h:forms each one inside both dialogs.
I'm using JSF 2 and Primefaces 4 and have the following issue:
I've got the following code in my XHTML:
<h:form id="form">
<table>
<tr id="formats">
<td>Formats</td>
<td>
<p:selectBooleanCheckbox value="#{bean.entity.formatted}">
<p:ajax event="change" update="formatsSelect" />
</p:selectBooleanCheckbox>
<p:selectOneMenu id="formatsSelect" rendered="#{bean.entity.formatted}">
<f:selectItems value="#{bean.formats}" />
</p:selectOneMenu>
</td>
</tr>
</table>
</h:form>
It outputs a checkbox and a select menu and what I expect is that when I check the checkbox the select menu should appear and should disappear when I uncheck it.... but nothing happens, I check and uncheck it and the select menu is unaffected.
In theory this should work since the selectBooleanCheckbox value is bound to the entity.formatted boolean value and the rendered value in the selectOneMenu is bound to the entity.formatted value and the p:ajax points to the correct id in the update attribute and the event is correct. This last bit I know since I created a listener in my bean that printed the value of formatted:
public void changeListener(){
System.out.println(this.entity.isFormatted());
}
And changed the p:ajax to:
<p:ajax event="change" update="formatsSelect" listener="#{bean.changeListener}" />
And it printed the value of formatted in the console.
What am I doing wrong?
Since you used rendered on the component (p:selectOneMenu id="formatsSelect") and updating the same component, it wont work.
Because that component might not have been added to/present in component tree by the time you are updating.
So use a h:panelGroup around it and update it and use rendered on p:selectOneMenu.
<p:selectBooleanCheckbox value="#{bean.entity.formatted}">
<p:ajax event="change" update="formatsSelectPG" />
</p:selectBooleanCheckbox>
<h:panelGroup id="formatsSelectPG">
<p:selectOneMenu id="formatsSelect" rendered="#{bean.entity.formatted}">
<f:selectItems value="#{bean.formats}" />
</p:selectOneMenu>
</h:panelGroup>
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.
We have build a component that consists of a TextInput and Select Box. So that the selection can be made either via the drop down list or by typing in the value into the text field. When a selection is made the Input Box is automatically filled with the key and if the key is entered the correct item in the selection box is displayed.
<h:panelGroup rendered="#{cc.attrs.rendered}">
<div id="#{cc.clientId}" class="abc-select #{cc.attrs.styleClass}" >
<h:inputText id="input" disabled="#{cc.attrs.disabled}"
value="#{cc.attrs.value}">
<a4j:ajax event="change" render="select" />
</h:inputText>
<rich:select disabled="#{cc.attrs.disabled}"
id="select" value="#{cc.attrs.value}"
listWidth="#{cc.attrs.listWidth}"
converter="#{cc.attrs.converter}">
<f:selectItems value="#{cc.attrs.items}" var="item"
itemValue="#{item}" itemLabel="#{item.name}" />
<a4j:ajax event="selectitem" render="input" oncomplete="setFocusOnInputField();" />
</rich:select>
</div>
</h:panelGroup>
However when we pass in an <a4j:ajax event="change" ... /> with an onChange event to render a component external element. It only works when the selection is made via the drop down menu.
<abc:myComponent id="idMC"
value="#{bean.value}"
items="#{bean.itemList}"
converter="#{itemConverter}">
<a4j:ajax event="change" render="idA idB idC" />
</kfn:select>
So far I figured out that it must have to do with the fact that the inputText already has an a4j element listing for change <a4j:ajax event="change" render="select" />.
When I change the ajax element in the inputText element to use <f:ajax .. /> instead it works fine.
Can someone explain why this is the case and is there a better solution?