Error Animations

The mx-animate-error attribute in Trongate MX enables visual error animations when an HTTP request receives a response code outside the success range (i.e., not between 200 and 299). This feature enhances user feedback by providing a clear visual cue when an operation encounters an error.

Syntax

<element mx-animate-error="true">

The mx-animate-error attribute is a boolean attribute. Setting it to "true" activates the error animation for the specified element.

Usage

To use the mx-animate-error attribute:

1. Add the attribute to an element that triggers an AJAX request (e.g., a form with mx-post).
2. Set the attribute value to "true" to enable the animation.
3. When the AJAX request encounters an error, a cross animation will be displayed.

Advanced Example

Here's a comprehensive example demonstrating the use of mx-animate-error in a form, where the form is assumed to be inside a modal:

<div class="my-validation-errors"></div>
<form mx-post="tasks/submit_task" 
      mx-close-on-success="true" 
      mx-animate-success="true" 
      mx-animate-error="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...">
    <button type="submit">Submit</button>
<?= form_close() ?>
<style>
.error-message {
    color: red;
}
</style>

This example assumes the following view structure:

<h1 class="text-center">Your Tasks</h1>
<div id="response-message"></div>
<p class="text-center">
<button mx-get="tasks/create_task" 
        mx-build-modal='{
            "id": "new-task-modal",
            "width": "760px",
            "showCloseButton": "true",
            "modalHeading": "Create New Task"
        }'>Create New Task
</button>
<div class="spinner mx-indicator"></div>
<div id="result" mx-get="tasks/view_all" mx-select="table" mx-trigger="load" mx-indicator="spinner"></div>

In this example:

• Form Submission: The form uses mx-post="tasks/submit_task" to submit data when the "Submit" button is clicked.
• Error Animation: If the submission fails (status code not 200-299), an error animation is displayed, triggered by mx-animate-error="true".
• Success Handling: On success, the form uses mx-animate-success="true" for a success animation and mx-close-on-success="true" to close the modal.
• Result Updates: mx-on-success="#result" updates the task list after successful submission.
• Response Target: mx-target="#response-message" specifies where to display response messages.
• Validation Errors: The highlight-errors class and my-validation-errors div are used for displaying validation errors.
• CSRF Protection: <?= form_close() ?> generates a CSRF token for security.

Server-Side Handling

The code sample below shows a PHP method that could be used for handling task submissions:

public function submit_task() {
    $this->validation->set_rules('task_title', 'Task Title', 'required|min_length[5]|max_length[255]');
    $result = $this->validation->run();
    if ($result === true) {
        $update_id = (int) segment(3);
        $data = $this->get_data_from_post();
        
        if ($update_id > 0) {
            $this->model->update($update_id, $data, 'tasks');
            $success_msg = 'The record was successfully updated';
        } else {
            $update_id = $this->model->insert($data, 'tasks');
            $success_msg = 'The record was successfully created';
        }
        http_response_code(200);
        echo $success_msg;
    } else {
        http_response_code(400);
        validation_errors(400);
    }
}

This method validates the input, performs the database operation, and returns appropriate responses and status codes.

Best Practices

Additional Notes

• The error animation is triggered for HTTP responses with status codes outside the 200-299 range.
• The animation style is provided by Trongate MX but can be customized with CSS.
• When using form_close(), ensure you're in a PHP environment that supports this Trongate framework function.
• The combination of mx-animate-error and proper server-side error handling provides a robust error feedback mechanism.

By utilizing the mx-animate-error attribute along with complementary attributes and proper server-side handling, you can create intuitive and responsive user interfaces in your Trongate MX applications, providing clear feedback for both successful operations and errors.