Nuxeo Server

Double Click Shield

Updated: November 13, 2017 Page Information Edit on GitHub

This page is scheduled for review and update. Check back soon for updated content!

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>

 


 

5 days ago manonlumeau Added content-review-lts2017 label
a month ago manonlumeau NXDOC-1346-FT review screenshot
2 years ago Solen Guitter 18
2 years ago Anahide Tchertchian 17
3 years ago Manon Lumeau 16
3 years ago Manon Lumeau 15
3 years ago Manon Lumeau 14
3 years ago Manon Lumeau 13
4 years ago Solen Guitter 12
4 years ago Solen Guitter 11
4 years ago Solen Guitter 10
4 years ago Solen Guitter 9 | Added TOC
4 years ago Solen Guitter 8
4 years ago Solen Guitter 7
4 years ago Guillaume Renard 6
4 years ago Guillaume Renard 5
4 years ago Guillaume Renard 3
4 years ago Guillaume Renard 4
4 years ago Guillaume Renard 2 | NXDOC-264
4 years ago Guillaume Renard 1
History: Created by Guillaume Renard