Home > Developer Documentation Center > JSF UI Framework > JSF UI Framework Overview > JSF and Ajax Tips and How-To Index > Double Click Shield
JSF UI Framework

Double Click Shield

Updated: July 17, 2023

The "Double Click Shield" feature is enabled in the JSF interface and it addresses issues that occur when clicking on two links quickly.

The Double Click Shield prevents a form from being submitted twice. When you click many times on the same button that launches a server-side action, the feature will let the first click launch the action but will prevent any additional click. This is possible thanks to a jQuery plugin which listens to the submit event of a given form.

Through a custom JSF Form Renderer, we add the dedicated CSS style class doubleClickShielded to all h:form handled by Nuxeo. When a page is loaded, the jQuery plugin will then enable the shield on all form flagged with this CSS class. (Note that the shield is not enabled on a4j:form since it serializes its submits).

You can see the shield in action when a "Request in progress" message is displayed at the top right corner of the window:

Limitations

The shield will intercept the submit event of a form. There are cases where a form is submitted without firing the submit event and the shield will therefore not be active.

h:commandLink vs. h:commandButton

  • h:commandLink renders a classic HTML a link with some custom JSF JavaScript, bound to the click event, that obscurely submits the form in a uncommon way. Then submitting it does not fire the submit event.
  • h:commandButton renders a HTML input tag with type="submit" which properly fires the submit event.

When designing your own template, if you'd like to protect a form from double submit, use the h:commandButton .

How to Locally Disable the Shield

There are use cases where the shield might break the proper functioning of a form. For instance, if you have a component that needs to perform several Ajax submits. This is the case when using rich:fileupload which performs as many submits as there are files to upload. With the shield enabled, only the first file will be uploaded and the others will be ignored. To address these particular use cases, you can disable the shield on a particular form by adding the disableDoubleClickShield="true" attribute.

Disabling Double Click Shield on a particular form

<h:form enctype="multipart/form-data" id="document_files_edit" disableDoubleClickShield="true">

    <rich:fileUpload uploadData="#{FileManageActions.uploadedFiles}"
      listHeight="150" maxFilesQuantity="5"
      id="upload"
      locale="#{localeSelector.localeString}"
      immediateUpload="true" >
      <a4j:support  onsubmit="removeUploadedFile(event.memo.entry);" event="onclear"/>
    </rich:fileUpload>

</h:form>

How to Globally Disable the Shield

You can disable the shield for the whole Nuxeo application by adding the following runtime contribution:

<component name="org.nuxeo.disableDoubleClickShield">

  <require>org.nuxeo.ecm.platform.ui.web.configuration.default</require>
  <extension target="org.nuxeo.runtime.ConfigurationService"
    point="configuration">
      <property name="nuxeo.jsf.enableDoubleClickShield">false</property>
  </extension>

</component>
Related How-Tos
Related Documentation