Home > Addons > Nuxeo JSF UI > JSF UI Framework > JSF and Ajax Tips and How-To Index > Double Click Shield
Addons

Double Click Shield

Updated: March 18, 2024

JSF UI Deprecation
This requires to have the JSF UI addon installed on your server that is deprecated since Nuxeo Platform LTS 2019.
Please refer to the Web UI documentation.

The "Double Click Shield" feature is enabled in the JSF interface and it addresses the issue described in the page I Get an Error When I Click 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  <span style="color: rgb(34,34,34);">doubleClickShielded</span>  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

  • <span class="il" style="color: rgb(34,34,34);">h</span> <span style="color: rgb(34,34,34);">:</span> <span class="il" style="color: rgb(34,34,34);">commandLink</span>  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