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 (ie 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. Eg

<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?