Ajax Forms and Actions

Here is some helpful tips and tricks when working with Ajax forms or actions.

Generic Advice

JSF2 integrates a standard Ajax support. One tag provides Ajax functionality, it is the f:ajax tag (similar to the a4j:support tag in previous version of JSF).

Complete documentation on the tag is available at http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/f/ajax.html

Always try to use the Ajax library features to help avoiding many calls to the server (ignoreDupResponses, eventsQueue,...), and re-render only needed parts of the page. This will prevent you from problems like "I Get an Error When I Click on Two Links Quickly".

Submitting the Form When Hitting The "Enter" Key

The browser form tag will natively select the first input submit button in the form: be aware that tag a4j:commandLink is not one of them, so you should replace it with a h:commandButton. You will have to use the f:ajax element for the submission to be done in Ajax.

Here is an example:

<h:form id="#{quickFilterFormId}"
  styleClass="action_bar">
  <nxl:layout name="#{contentView.searchLayout.name}" mode="edit"
    value="#{contentView.searchDocumentModel}"
    template="content_view_quick_filter_layout_template.xhtml" />
  <h:commandButton
    value="#{messages['label.contentview.filter.filterAction']}"
    id="submitFilter"
    styleClass="button"
    action="#{contentView.resetPageProvider()}">
    <f:ajax execute="@form" render="#{elementsToReRender}"
      listener="#{selectionActions.setStaticValue}" />
  </h:commandButton>
</h:form>

Ajax Re-Rendering

If you need to perform some Ajax re-rendering when submitting this button, they'd better be placed directly on the f:ajax tag itself: adding a tag a4j:support for this inside the h:commandButton tag will generates an additional call to the server when using some browsers (visible using Firefox 8.0) and may lead to errors when server is under load.

Command Button Visibility

Note also that the command button must be visible: if you'd like it to be hidden, placing it inside a div using display: none will break the submission using some browsers (visible using Chrome 15).

Disabling Buttons after Form Submission

Last but not least, if you'd like the buttons to be disabled when submitting the form (to make sure people do not keep on clicking on it), they should be disabled by the form itself when the onsubmit JavaScript event is launched: if it is disabled when the onclick event is received on the button, some browsers will not send the request at all (visible with Chrome).

JavaScript Form Tricks

When the form is not generated by a reusable layout (like in the example above), you can also use more traditional JavaScript tricks to submit the form like:

<h:inputText value="#{searchActions.simpleSearchKeywords}"
  onkeydown="if (event.keyCode == 13) {Element.next(this).click();} else return true;" />
<h:commandButton action="#{searchActions.performSearch}"
  value="#{messages['command.search']}" styleClass="button" />