on valuechange event of select one menu component, i can see the changes applied to the model / java, but i dont see changes applied to input components on page.
when i do a F5, i see the changes but other data input by user gets lost.
i want to do a refresh without user loosing his data entered which is not submitted yet.
how can this be achieved using jsf ajax.
i am calling java code using f:valueChangeListener. for ajax i am using a4j:ajax
<h:selectOneMenu rendered="" value="" immediate="true">
<f:selectItems value="" />
<a4j:ajax event="change" execute="#this" render="#form" />
<f:valueChangeListener binding="" />
</h:selectOneMenu>
Related
I want to pass data to back bean through ajax call on command button click.
I have a form with couple of input text fields where each field is having ajax blur event.
Every thing is working fine in happy flow except in the flowing scenario.
Ajax blur event is invoking when i directly clicking on submit which is suppose to be happen before submit click, hence i should make another click on submit button to invoke ajax call to save my form.
Here is the code.
Input text fields:
<p:inputText id="txt_name"
value="#{partnerVO.partnerName}"
required="true" maxlength="30"
rendered="#{!partnerVO.isReadOnly}">
<p:keyFilter regEx="/[A-Za-z0-9#.,&- ]/i"
for="txt_name" preventPaste="false" />
<p:ajax update="txt_name" event="blur" />
</p:inputText>
<p:inputText id="txt_assigned"
value="#{partnerVO.assignedName}"
required="true" maxlength="30"
rendered="#{!partnerVO.isReadOnly}">
<p:keyFilter regEx="/[A-Za-z0-9#.,&- ]/i"
for="txt_assigned" preventPaste="false" />
<p:ajax update="txt_assigned" event="blur" />
</p:inputText>
Command Button:
<p:commandButton id="btn_save"
title="Save"
value="#{lbl['tpdetails.remove.additional.address']}"
update="#form" process="#this"
action="#{partnerDetailsController.save}">
</p:commandButton>
I'm using JSF 2.2
Please provide some suggestions to overcome this strange behavior.
Note: omitted form related code here.
In my JSF application if I refresh the page everything get's rendered exceted the primeface graphicimages and jsf <f:ajax /> isn't working. If I wait 5 seconds the ajax calls are working again and graphicimages are getting loaded.
Another example is when I upload an image. The image get procced, uploaded and the site get's refreshed. After this the image is displayed, but ajax calls won't work after a few seconds after.
The app runs on a JBoss 7.1 with JSF 2.1
Is this a problem with slow hardware or something else. I would be happy with any hints because I don't really know where to look for a solution.
Example:
<p:selectOneRadio id="options" value="#{gameWriter.uploadCover}">
<f:selectItem itemLabel="ja" itemValue="true"/>
<f:selectItem itemLabel="nein" itemValue="false"/>
<f:ajax/>
</p:selectOneRadio>
When you define the f:ajax, try to give the UI components you want to execute and update. Also give the event. If you want process the whole form and update the whole page, you can use #form and #all in the f:ajax.
An example with #form and #all with f:ajax is as follows.
<h:form>
<p:selectOneMenu id="cmb" value="#{investigationItemController.current}" >
<f:selectItem itemLabel="Please select an item" />
<f:selectItems value="#{investigationItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
<f:ajax event="change" execute="#form" render="#all"/>
</p:selectOneMenu>
<h:outputLabel id="lbl" value="#{investigationItemController.current}" />
</h:form>
An example with primefaces ajax command is as follows.
<h:form>
<p:selectOneMenu id="cmb" value="#{investigationItemController.current}" >
<f:selectItem itemLabel="Please select an item" />
<f:selectItems value="#{investigationItemController.items}" var="ii" itemLabel="#{ii.name}" itemValue="#{ii}" />
<p:ajax event="change" process="cmb" update="lbl"/>
</p:selectOneMenu>
<h:outputLabel id="lbl" value="#{investigationItemController.current}" />
</h:form>
We can add more than one or for one UI Component if we want to execute the logic for more than one event.
Events for standard JSF UI component can be taken after removing the 'on' from the list of attributes of the UI component starting with 'on'. For example if JSF UI support onChange as an attribute you can use event="change".
For primefaces UI components, the possible events are listed under Primefaces documentation.
It is essential to correctly select the event in order for a successful ajax response.
I have a problem with a JSF 2 form that contains an ajax field. When I use the mouse to press the submit button of the form while the cursor is still in the ajaxified input field the input value of the field does not get submitted before the action is triggered in the backing bean. Also the attached validator and converter are not triggered.
<h:form id="invoice">
...
<h:inputText value="#{invoiceBean.amount}" required="true" validator="#{invoiceBean.validateAmount}">
<f:converter converterId="CurrencyConverter" />
<f:ajax event="blur" render="#this"/>
</h:inputText>
<h:commandButton action="#{invoiceBean.processInvoice()}" />
</h:form>
I also tried to enhance the command button with <f:ajax /> but the result stayed the same. Other (non-ajax) fields on the same form (not shown in the code snippet above) are submitted correctly. The ajax field is also submitted, converted and validated if I click somwhere else on the page before submitting but not when using the button directly.
Is there anything I am missing to have the field also be submitted on/before form submit?
Regarding the <h:inputText> ajax behaviour: use <f:ajax> with the default event valueChange, which is the default event for all input components. This is indeed equivalent to omitting the event attribute:
<f:ajax render="#this" />
Regarding the <h:commmandButton> component, don't forget to specify the execute attribute of <f:ajax>:
<f:ajax execute="#form" />
otherwise it will default to #this, therefore rendering vane your effort.
I am trying to display a page where the user, by the appropriate selection using a radio button, sees either a textbox or a combo box. This is relatively easy and I managed to do that by the following code:
<h:selectOneRadio id="selection" value="#{inputMethod.choice}">
<f:selectItem itemValue="#{inputMethod.TEXT}" itemLabel="textbox"/>
<f:selectItem itemValue="#{inputMethod.COMBO}" itemLabel="combobox" />
<f:ajax event="click" execute="#this" render="#form" />
</h:selectOneRadio>
<h:panelGroup id="Textbox" rendered="#{inputMethod.choice==inputMethod.TEXT}">
<h:outputLabel>Textbox:</h:outputLabel>
<h:inputText value="#{myBean.somevalue}" />
</h:panelGroup>
<h:panelGroup id="Combobox" rendered="#{inputMethod.choice==inputMethod.COMBO}">
<h:outputLabel Combobox:/>
<h:selectManyListbox id="CommunityListbox" value="#{myBean.choices}">
<f:selectItems value="#{myBean.selections}" var="u" itemValue="#{u.id}" itemLabel="#{u.name}"/>
</h:selectManyListbox>
</h:panelGroup>
The problem I have is that the setter for the combo box is never called.
In fact, the setter is only called for the component that is rendered by default (in this case whenever inputMethod.choice==inputMethod.TEXT). If I remove the conditional rendering, all setters are called as one would expect.
Any ideas or answers will be greatly appreciated!
PS: I am using jsf2.0, Glassfish 3.1, Netbeans 7.0 (in case this is of any importance)
You need to ensure that #{inputMethod.choice} evaluates exactly the same during the request of processing the form submit as it did during the request of displaying the form. Easiest is to put the bean in the view scope or to move the initialization logic into the (post)constructor of the request scoped bean.
How do you trigger validation on an input component when the component loses focus using ajax instead of waiting for the form to be manually submitted?
Put a <f:ajax event="blur"> in the UIInput component which re-renders a <h:message> associated with the component in question.
<h:inputText id="foo" value="#{bean.foo}" required="true">
<f:ajax event="blur" render="fooMessage" />
</h:inputText>
<h:message id="fooMessage" />
See also JSF 2.0 tutorial with Eclipse and Tomcat - the view and finetuning validation
Try this code:
<h:inputText value="#{bean.value}" valueChangeListener="#{bean.validateValue}">
<f:ajax event="blur" render="valueError"/>
</h:inputText>
<h:outputText id="valueError" value="#{bean.valueErrorMessage}" style="color: red;" />
If the user changes the value in your input component you can validate it with your valueChangeListener. If the user then moves to another input component the ouputText component will be rendered. There you can display a message if the validation failed.