Automatically Closing Modals
Trongate MX provides two powerful attributes, mx-close-on-error
and mx-close-on-success
, that enable automatic closure of modals based on the outcome of AJAX requests. These attributes significantly enhance user experience by streamlining interaction flows in modal-based operations.
mx-close-on-success
The mx-close-on-success
attribute automatically closes the modal when an AJAX request is successful, receiving a response code in the 'success' range (200-299).
Syntax
<element mx-close-on-success="true">
Usage
- Add the attribute to an element that triggers an AJAX request within a modal (typically a form or button).
- Set the value to "true" to enable automatic closing on success.
Advanced Example
<div class="my-validation-errors"></div>
<form mx-post="tasks/submit_task"
mx-close-on-success="true"
mx-animate-success="true"
mx-on-success="#result"
mx-target="#response-message"
autocomplete="off" class="highlight-errors">
<label>Task Title</label>
<div class="error-message"></div>
<input type="text" name="task_title" placeholder="Enter title here..." autocomplete="off">
<button type="submit">Submit</button>
<?= form_close() ?>
<style>
.error-message {
color: red;
}
</style>
In this comprehensive example:
- The form will automatically close the modal upon successful submission (
mx-close-on-success="true"
). - A success animation will play before closing (
mx-animate-success="true"
). - After success, it updates an element with id "result" (
mx-on-success="#result"
). - Response messages are targeted to an element with id "response-message" (
mx-target="#response-message"
). - The form includes error handling and validation feedback mechanisms.
mx-close-on-error
The mx-close-on-error
attribute automatically closes the modal when an AJAX request encounters an error, receiving a response code outside the 'success' range.
Syntax
<element mx-close-on-error="true">
Usage
- Add the attribute to an element that triggers an AJAX request within a modal.
- Set the value to "true" to enable automatic closing on error.
Example with Error Handling
<form mx-post="tasks/delete_task"
mx-close-on-error="true"
mx-animate-error="true"
mx-on-error="#error-display">
<input type="hidden" name="task_id" value="123">
<button type="submit">Delete Task</button>
<?= form_close() ?>
<div id="error-display"></div>
In this example:
- The modal will close if the delete operation encounters an error (
mx-close-on-error="true"
). - An error animation will play before closing (
mx-animate-error="true"
). - Error messages will be displayed in the "error-display" element (
mx-on-error="#error-display"
).
Combining Success and Error Handling
For comprehensive modal management, you can combine both attributes:
<form mx-post="tasks/update_task"
mx-close-on-success="true"
mx-close-on-error="true"
mx-animate-success="true"
mx-animate-error="true"
mx-on-success="#task-list"
mx-on-error="#modal-errors">
<input type="text" name="task_title" required>
<button type="submit">Update Task</button>
<?= form_close() ?>
This setup ensures the modal closes in both success and error scenarios, with appropriate animations and feedback mechanisms.
Integration with Server-Side Logic
To fully leverage these attributes, ensure your server-side logic returns appropriate status codes. For example:
public function update_task() {
$this->validation->set_rules('task_title', 'Task Title', 'required|min_length[5]');
if ($this->validation->run() === false) {
http_response_code(400);
echo json_encode(['errors' => $this->validation->get_error_array()]);
return;
}
// Process the update
$success = $this->task_model->update($this->input->post('task_id'), $this->input->post('task_title'));
if ($success) {
http_response_code(200);
echo json_encode(['message' => 'Task updated successfully']);
} else {
http_response_code(500);
echo json_encode(['message' => 'Failed to update task']);
}
}
Best Practices and Considerations
- User Feedback: Always provide clear feedback about the operation's outcome, even if the modal closes automatically.
- Error Handling: When using
mx-close-on-error
, ensure error messages are logged or displayed elsewhere in the application. - Animation Timing: Be mindful of the animation duration when combining with
mx-animate-success
ormx-animate-error
to ensure a smooth user experience. - Accessibility: Consider adding ARIA attributes to enhance accessibility when modals open and close automatically.
- Performance: Monitor the performance impact of automatic modal interactions, especially on slower devices or connections.
Technical Notes
- These attributes are processed client-side by the Trongate MX JavaScript library.
- The modal closing behavior has a built-in delay of approximately 1300ms to accommodate animations.
- These attributes work in conjunction with Trongate's modal management system and may require specific modal structures to function correctly.
- For complex scenarios, consider using custom JavaScript in conjunction with these attributes for more fine-grained control.
By effectively utilizing mx-close-on-success
and mx-close-on-error
, developers can create sophisticated, user-friendly modal interactions in Trongate MX applications. These attributes streamline the development process and contribute to a more intuitive and responsive user interface.