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.
Related
I have a text field and a validator as shown below. It uses p:ajax to submit the value the moment it is changed, and the validator stops the submission if the field does not pass. The user gets the error message as expected (which is what update="msgs .." does).
However when it doesn't pass I want to reset the value to what it was before.
<p:inputText id="txtName"
value="#{workspace.selectedPath.name}"
style="width: 20%"
validator="validateName"
valueChangeListener="#{workspace.doNameChanged}"
>
<p:ajax update="msgs formTree" />
</p:inputText>
The following link shows how to use the p:resetInput tag in PrimeFaces, but it doesn't work as part of p:inputText because it is not an ActionSource. If you make it a child of the p:ajax tag it is just ignored. Any suggestions?
How to reset input fields in a form after validation fail when updating it with new values
Since PrimeFaces 4.0, you can use <p:ajax resetValues> for this.
<p:inputText ...>
<p:ajax ... resetValues="true" />
</p:inputText>
See also:
How can I populate a text field using PrimeFaces AJAX after validation errors occur?
I've created a textField with JSF and want it to update a table myTable when the user inserts a String.
I've tried this
<h:inputText id="searchHeader" value="#{myBean.searchStringFirstname}"
valueChangeListener="#{myBean.searchByFirstnameValueChanged}" >
<f:ajax render="myTable"/>
</h:inputText>
and this
<h:inputText id="searchHeader" value="#{myBean.searchStringFirstname}">
<f:ajax listener="#{myList.searchByFirstname}" event="valueChange"
execute="myTableForm" render="myTable" />
</h:inputText>
I want the event to fire every time the value of the InputField gets changed, but in both cases the eventListener method specified by valueChangeListener only gets called when the user hits the enter key.
Why is that?
I've tried this solution JSF2 search box but I could not make it work.
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>
I try to get experiment with ajax. I want that string from inputText typing to outpuLabel.
<h:form>
<h:inputText id="str" value="#{f.str}">
<f:ajax render="num"/>
</h:inputText>
<h:outputLabel id="num" value="#{f.str}">
</h:outputLabel>
</h:form>
But the value of num update only when i'm typed and clicked the mouse, not during typing to str. How do that the num will be updating during the typing?
The <f:ajax event> defaults in case of UIInput components to valueChange which renders in case of <h:inputText> the ajax call in the onchange attribute of the generated <input type="text"> element (you can see it yourself by opening the JSF page in webbrowser and do rightclick and View Source).
So, the ajax request is only fired when the HTML DOM change event is fired. That is, when you change the value of the input element and then the input element loses focus (blurs).
As per your functional requirement, you actually want the ajax request to be fired when the HTML DOM keyup event is fired. In that case, you'd need to explicitly specify that.
<f:ajax event="keyup" ... />
See also:
What values can I pass to the event attribute of the f:ajax tag?
I have an input textbox that accept a name, process the name in reverse order, and then output it to another textbox. Whenever I input the value and click anywhere on the page (means lost focus from textbox), the output textbox will get update automatically.
When I open up the source code I found something like code below, may I know what does the ajax thing do to the inputtext component?
<h:inputText id="name" value="#{helloBean.name}">
<f:ajax render="printMyName"/>
</h:inputText>
<h:outputText id="printMyName" value="#{helloBean.reverseName}"/>
Taken from Learning JSF2: Ajax in JSF – using f:ajax tag
Sending an Ajax request
JSF comes with one tag to send an Ajax request, the tag is called
f:ajax. This tag is actually a client side behavior. Being a behavior
implies it’s never just used by itself on a page, it is always added
as a child tag (behavior) to another UI component (or can even wrap
several components). Let’s use a small echo application to demonstrate
usage of this tag.
<h:form>
<h:panelGrid>
<h:inputText value="#{bean.text}" >
<f:ajax event="keyup" render="text"/>
</h:inputText>
<h:outputText id="text" value="#{bean.text}" />
</h:panelGrid>
</h:form>
Code snippet above takes care of firing an Ajax request based on onkeyup event. Notice the actual event name is keyup. This takes care of firing an Ajax request. Next we need to figure out how to do partial view rendering.
Attribute Description event:
String on which event Ajax request will be
fired. If not specified, a default behavior based on parent component
will be applied. The default event is action for ActionSource (ie:
button) components and valueChange for EditableValueHolder components
(ie: input). action and valueChange are actual String values that can
be applied applied event attribute.