How to use <f:ajax> to set updated value in managed bean when value of <h:inputText> is changed

Question

I have a JSF page with <h:inputText>. I want to set the value bound to the <h:inputText> when the value is changed.

Bean:

@ManagedBean
@SessionScope
public class MyBean {

    private String in;
    //getter and setter

}

View:

<h:inputText value="#{myBean.in}" />

How can I use <f:ajax> for this?

Answer 1

Just nest the <f:ajax> tag within the <h:inputText> tag.

<h:inputText value="#{myBean.in}">
    <f:ajax />
</h:inputText>

It'll submit the value when the HTML DOM change event has occurred (i.e. when the field was edited and then blurred).

The event attribute already defaults to valueChange, so it's omitted. Its execute attribute already defaults to @this, so it's omitted. In case you'd like to update other component on complete, set render attribute. E.g.

<h:inputText value="#{myBean.in}">
    <f:ajax render="msg" />
</h:inputText>
<h:message id="msg" />

If you want to invoke a listener when it has been successfully set, set the listener attribute:

<h:inputText value="#{myBean.in}">
    <f:ajax listener="#{myBean.changeIn}" />
</h:inputText>

public void changeIn() {
    System.out.println("in has been changed to " + in);
}

See also:

• When to use valueChangeListener or f:ajax listener?
• What values can I pass to the event attribute of the f:ajax tag?