JSF 2.2: Reset input fields

In this post of the series on JSF 2.2 I will show a use case for the new resetValues attribute on f:ajax. With this attribute (and the the related code) JSF 2.2 provides a solution for a problem that has been around for quite some time. In some cases JSF cannot update the values of input components during ajax requests unless their value is explicitly reset.

To understand resetValues we need to take a closer look at the problem it solves. The following Facelets view fragment looks good at first glance but comes with a potential problem:

<h:form id="form">
  <h:messages id="msgs"/>
  <h:inputText id="v1" value="#{bean.value1}"/>
  <h:commandLink value="+1" action="#{bean.incValue1}">
    <f:ajax render="v1"/>
  </h:commandLink>
  <h:inputText id="v2" value="#{bean.value2}">
    <f:validateLongRange minimum="10"/>
  </h:inputText>
  <h:commandButton value="Save">
    <f:ajax execute="v1 v2" render="msgs v1 v2"/>
  </h:commandButton>
</h:form>

As long as the “Save” button is not clicked with an invalid value for the second input everything works fine. Every time the “+1” link is clicked, bean.value1 is increased by one and the component is re-rendered with the new value.

The trouble starts when the “Save” button is clicked with an invalid value for the second input. JSF starts the partial processing and executes the components with the IDs v1 and v2. As the validation for v2 fails, a FacesMessage is added to the FacesContext. Since we expected something like this, the h:messages component with ID msgs is re-rendered along with v1 and v2 and the user sees the message.

So far so good. But now we have a problem. Clicking the “+1” link no longer works. The link itself works correctly and the value of bean.value1 is increased with every click. But the new value is not rendered.

The cause for this behavior is the request with the invalid value for v2. During this request v1 was also executed and its local value was set in the process validations phase. Due to the validation error the update model phase was never executed and the local value of component v1 remained set. When the local value is set the renderer will always use it instead of the value coming from the value expression.

As long as we do not reset the component, the renderer will not pick up the value from bean.value1. With JSF 2.2 this can be done with the new attribute resetValues on f:ajax. If resetValues is set to true, JSF resets all input components specified in the render attribute. The reset is done before the partial response is rendered. Internally, JSF calls the new method UIViewRoot.resetValues for this.

The following listing shows the “+1” link from above with the additional resetValues attribute.

<h:commandLink value="+1" action="#{bean.incValue1}">
  <f:ajax render="v1" resetValues="true"/>
</h:commandLink>

For non-Ajax requests JSF 2.2 additionally introduces the tag f:resetValues. f:resetValues adds a special action listener to the surrounding command component that resets all components whose client IDs are specified in the render attribute. This only works if you really use the client IDs. For our example this would be form:v1 and form:v2 instead of v1 and v2. Using values like @form known from f:ajax is not supported by f:resetValues!

The following listing shows a “Reset” button for the example above.

<h:commandButton value="Reset" action="#{bean.reset}"
    immediate="true">
  <f:resetValues render="form:v1 form:v2"/>
</h:commandButton>

The action method reset just sets the values of value1 and value2 to 0. Without f:resetValues the new value would not be displayed as the submitted value of the components would be rendered (even with immediate set to true).

The source code for the JSF 2.2 series examples can be found in the JSFlive Github repository jsf22-examples (module jsf22-reset-values).

Further official details about JSF 2.2 can be found in the JSR 344: JavaServer Faces 2.2.