ajax-contact-form

Renders and submits a contact creation form inline via AJAX.

Attached to the root element via data-js-ajax-contact-form. Expects the following elements within root:

#show-contact-form-button — button to load the form, with a data-url attribute pointing to the form HTML endpoint
#contact-form-widget — container into which the form HTML is injected
#related-contact — block that indicates a contact can be linked
#related-contact-list — list to which newly created contacts are appended
#submit-contact-form-button — submit button inside the injected form, with a data-url attribute for the POST endpoint
#contact-ajax-success-message — success message element (hidden by default)
#contact-ajax-error-message — container for field validation error messages
#contact-ajax-unexpected-error-message — fallback error message element (hidden by default)

On clicking the show-button the form HTML is fetched and injected. On submit the form data is POSTed to data-url; on success the new contact is appended to the list and the form is hidden, on failure validation errors are displayed. If #id_area_of_responsibility already has a validation error on page load the form is shown immediately.