Trongate Website Homepage

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

  1. Add the attribute to an element that triggers an AJAX request within a modal (typically a form or button).
  2. 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:

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

  1. Add the attribute to an element that triggers an AJAX request within a modal.
  2. 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:

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

  1. User Feedback: Always provide clear feedback about the operation's outcome, even if the modal closes automatically.
  2. Error Handling: When using mx-close-on-error, ensure error messages are logged or displayed elsewhere in the application.
  3. Animation Timing: Be mindful of the animation duration when combining with mx-animate-success or mx-animate-error to ensure a smooth user experience.
  4. Accessibility: Consider adding ARIA attributes to enhance accessibility when modals open and close automatically.
  5. Performance: Monitor the performance impact of automatic modal interactions, especially on slower devices or connections.

Technical Notes

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.