If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.
Please report issues or suggest improvements on GitHub. Community input is invaluable in making the docs stronger.
Not comfortable with GitHub? No problem — you can also get in touch with us directly via our contact form. We welcome all feedback.
Automatically Closing Modals
Trongate MX has two attributes for closing dynamic modals: mx-close-on-success and mx-close-on-error. These attributes work in conjunction with dynamically created modals to provide enhanced modal control.
Demonstration
Click on the 'Create Modal' button to see a demonstration of automatic modal closing.
Basic Modal Creation and Closure
Let's start by creating a module that we can use for testing purposes.
We'll call the module 'test' and the URL for displaying your basic 'Create Modal' button will be:
The <base-url> string is a placeholder for your website's base URL.
The controller file for your 'test' module should be named as 'Test.php'. In addition, the name of the method that will be used for rendering your test page will be 'demo1'. Here's the starter code for the 'Test.php' controller file:
And here's the corresponding view file (demo1.php):
Here's a pure HTML example that accomplishes the same goal:
Setting Up the Modal Content Endpoint
Now, let's create an endpoint that serves the modal content. This endpoint should return the HTML for your modal body. For this example, let's create a method named 'simple_modal_content'. Below is the code for this method and please do add this to your 'Test.php' controller file:
Here's the corresponding view file content (simple_modal_content.php):If you'd rather not using Trongate's form helper functions, here's an alternative syntax that could be used:
Building applications with pure HTML forms can create potential security risks. See our CSRF Protection documentation for details.
There are no form fields in the code above since the goal is to produce the most basic example possible. After the 'Submit' button is pressed, the goal is to return a 'success' response from the API, regardless of what has been posted to the endpoint.
Handling Form Submission
The endpoint that handles the form submission is going to be really simple. It will return an HTTP response status code of 200, indicating form submission success.
Our endpoint will be served via a method named as 'simulate_form_success'.
Complete Controller File Code
If you've been following along, your controller file - for this first demonstration - should be as follows:
Adding Visual Feedback
For a better user experience, we can add animations to provide visual feedback. This can be achieved by adding the mx-animate-success attribute to the form and giving it a value of 'true':
For an alternative HTML-centered approach, here's the corresponding code:
This page covers how to automatically close modal windows after an HTTP request has been executed using Trongate MX.
Whilst this feature may be useful (and we hope it is!), don't forget that you can make manual closing of modal elements possible by usage of the JavaScript function closeModal().
Below is an example of a simple button that - when clicked - will close any modal windows that are currently visible:
Handling Error Responses
While the previous example demonstrated closing modals on successful API responses, Trongate MX also supports automatic modal closure when receiving error responses (HTTP status codes outside 200-299).
To implement this, modify two key attributes in your form:
Here's an alternative syntax for developers who prefer to work with pure HTML:
For this to work, your API endpoint should return an appropriate error status code. For example:
The key changes from the success example are the introduction of; mx-close-on-error="true" (which triggers modal closure when receiving error responses) and mx-animate-error="true" (which displays a red cross animation before the modal closes).
When the form submission results in an error response, Trongate MX will draw a red cross animation before closing the modal.
Summary
Trongate MX provides two specialized 'mx' attributes for automatic closing of modal elements:
mx-close-on-successmx-close-on-error
These can be enhanced with animation attributes that render 'success' or 'error' animations immediately before modal closure:
mx-animate-successmx-animate-error
These attributes, alongside other Trongate MX features, can be combined to create highly responsive, interactive user interfaces while minimizing JavaScript dependencies.
Don't forget, you can also add onclick="closeModal()" to elements, like buttons, to have modal windows close with user interaction such as clicks.