Modal and AJAX forms

Important: This documentation is for Moodle 3.11 and above, for previous versions please use MForm Modal tutorial on how to create your own modal form.

Modal forms

To display a moodleform in a modal popup you need to:

create a class with the form definition extending \core_form\modal , do not add submit/cancel buttons to the form definition;
initialize the form in the listener to some javascript event (for example, a click on the "Add" or "Edit" link)

Example of the JS code: import ModalForm from 'core_form/modal'; import {get_string as getString} from 'core/str';

// .....

   document.querySelectorAll('[data-role=editfield][data-id]').addEventListener('click', e => {
       e.preventDefault();
       const element = e.target;
       const modal = new ModalForm({
           // Pass the name of your class here:
           formClass: "core_customfield\\field_config_form", 
           // Add as many arguments as you need, they will be passed to the form:
           args: {id: element.getAttribute('data-id')},
           // Pass any configuration settings to the modal dialogue, for example, the title:
           modalConfig: {title: getString('editingfield', 'core_customfield', element.getAttribute('data-name'))},
           // Pass the element that should get the focus after the modal dialogue is closed:
           returnFocus: element
       });
       // Override onSubmitSuccess() method if you want to execute something on form submit. Response will contain everything the process() function returned:
       modal.onSubmitSuccess = (response) => {
           console.log(response);
       }; 
   });

How it works:

When an instance of the ModalForm class is created in the Javascript, the AJAX requests calls the web service core_form_modal_form_body. This web service creates a new instance of the form (specified in the formClass parameter), passes the arguments (args parameter), and returns the form HTML and JS similar to how Fragment does it. The form itself is then displayed inside the popup.
The ModalForm class listens to the click events on no-submit buttons, if such button is pressed, the new request is sent to the same web service and the form is re-rendered.
When "Cancel" or "Close" buttons in the modal dialogue are pressed, the ModalForm triggers necessary javascript events (to reset Atto autosave, to reset "dirty" form state, etc), the modal dialogue is closed and destroyed.
When the "Save" button in the modal dialogues is pressed, the ModalForm collects form data and sends it in a AJAX request to the same web service core_form_modal_form_body. If the server-side validation failed, a form is re-rendered with all the errors information. If the form was submitted successfully, the modal dialogue is closed and destroyed automatically and the onSubmitSuccess() method is called.

AJAX forms

To load and submit a moodleform dynamically via AJAX requests you need to: - create a class with the form definition extending \core_form\modal , for AJAX forms you will need to add the regular submit/cancel buttons; - create a container element in your HTML where the form should be loaded; - initialize the form in the javascript; - load the form in the listener to some javascript event (or do it on page load)

.... TBC

Documentation

Modal and AJAX forms