Success Animations

The mx-animate-success attribute in Trongate MX enables a visual success animation when an HTTP request returns a status code within the success range (i.e., between 200 and 299). This feature provides users with immediate visual feedback that an operation has completed successfully.

Important: Apply the mx-animate-success attribute to the element that initiates the HTTP request (e.g., a button or form). Placing it on unrelated elements will not trigger the success animation as intended.

Syntax

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

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

Usage

To use the mx-animate-success attribute:

Add the mx-animate-success attribute to an element that triggers an AJAX request (e.g., a form with mx-post).
Set the attribute value to "true" to enable the animation.
When the AJAX request is successful, a checkmark animation will be displayed.

Note: The placement of the success animation is context-dependent:

Default Behavior: The animation appears in the location specified by the mx-target attribute.
Modal Exception: If the triggering element is within a modal body, the animation will be shown inside the modal body, overriding the mx-target setting.

Advanced Example

Here's a more comprehensive example demonstrating the use of the mx-animate-success attribute in a form, likely within a modal:

<form mx-post="title_boss/submit_attempt_add_item" 
      mx-close-on-success="true" 
      mx-animate-success="true" 
      mx-animate-error="true"
      mx-on-success="#result">
    <label>Item Title</label>
    <input type="text" name="item_title" placeholder="Enter title here..." autocomplete="off">
    <button type="submit">Submit</button>
<?= form_close() ?>

In this example:

Form Submission: The form uses mx-post to submit data to the "title_boss/submit_attempt_add_item" endpoint when the "Submit" button is clicked.
Success Animation: If the form submission succeeds (status code 200-299), a checkmark animation will be shown for approximately 1.3 seconds, triggered by the mx-animate-success="true" attribute.
Error Animation: If the submission fails, an error animation will be displayed, triggered by mx-animate-error="true".
Modal Closing: The mx-close-on-success="true" attribute ensures that the modal will automatically close after a successful request, but only after the success animation completes.
Success Action: The mx-on-success="#result" attribute specifies that after a successful submission, the element with the id "result" should be updated or triggered.
CSRF Protection: The use of <?= form_close() ?> generates a CSRF token, enhancing the security of the form submission.

To maximize the effectiveness of the mx-animate-success attribute, consider using it alongside other Trongate MX attributes as demonstrated in the example above:

mx-animate-error: Handles error animations for failed requests.
mx-close-on-success: Automatically closes modals on successful requests.
mx-on-success: Triggers actions or updates elements after successful requests.

For a complete list of all Trongate MX attributes, check out our Trongate MX Attribute Reference.

Additional Notes

The success animation is triggered only for HTTP responses with status codes between 200 and 299.
The default animation style is provided by Trongate MX but can be customized with CSS if needed.
When using form_close(), ensure you're within a PHP environment that supports this function, typically provided by the Trongate framework.
The combination of mx-animate-success and mx-close-on-success provides a smooth user experience, showing the success animation before closing the modal.

Using the mx-animate-success attribute, along with complementary attributes, allows you to create intuitive and responsive user interfaces in your Trongate MX applications, enhancing the overall user experience with visual feedback and automated actions.