Class: AjaxSubmit

AjaxSubmit()

<brut-ajax-submit>

Wraps a <BUTTON> assumed to be inside a form to indicate that, when clicked, it should submit the form it's a part of via AJAX. It accounts for network failures and timeouts.

The general flow is as follows:

  1. When the button is clicked, the form's validity is checked. If it's not valid, nothing happens.
  2. If the form is valid, this element will be given the requesting attribute.
  3. The request will be initiated, set to abort after request-timeout ms (see below).
  4. If the request returns OK:
    • requesting will be removed and submitted will be added.
    • submitted will be removed after submitted-lifetime ms.
  5. If the request returned a 422, error messages are parsed. See below.
  6. If the request returns not OK and not 422:
    • if it has been request-timeout ms or more since the button was first clicked, the operation is aborted (see below).
    • if it has been less than request-timeout ms and the HTTP status code was 5xx, the operation is retried.
    • otherwise, the operation is aborted.
  7. If fetch throws an error, the operation is aborted.

Aborting the operation will submit the form in the normal way, allowing the browser to deal with whatever the issue is. You can set log-request-errors to introspect this process.

For a 422 response, this element assumes the response is text/html and contains one or more <brut-cv> elements. These elements will be inserted into the proper <brut-cv-messages> element, as follows:

  1. The input-name is examined.
  2. A <brut-cv-messages input-name="«input-name»"> is located
  3. The containing form is located
  4. The input element(s) are located inside that form, based on input-name.
  5. The <brut-cv-messages> are cleared of any element with attribute server-side
  6. The messages from the server are inserted, with the attribute server-side added if it's not there.
  7. The input is set as having a custom validity
  8. validity is reported
  9. The first input located is scrolled into view
  10. If the input is modified after this all happens, custom validity is cleared

Constructor

new AjaxSubmit()

Properties:
Name Type Description
request-timeout number

number of ms that the entire operation is expected to complete within. Default is 5000
submitted-lifetime number

number of ms that "submitted" should remain on the element after the form has completed. Default is 2000
requesting boolean

boolean attribute that indicates the request has been made, but not yet returned. Don't set this yourself outside of development. It will be set and removed by this element.
submitted boolean

boolean attribute that indicates the form has been successfully submitted. Don't set this yourselr outside of develoment. It will be set and removed by this element.
log-request-errors boolean

if set, logging related to request error handling will appear in the console. It will also cause any form submission to be delayed by 2s to allow you to read the console.
Source:
Fires:
  • brut:submitok Fired when the AJAX request initated by this returns OK and all processing has completed
  • brut:submitinvalid Fired when the AJAX request initated by this returns a 422 and all logic around managing the reponse has completed
Example
<form action="/widgets" method="post">
  <input type=text name=name>

  <brut-ajax-submit>
    <button>Save</button>
   </brut-ajax-submit>
</form>