Handling Request Errors

The mx-on-error attribute in Trongate MX allows you to specify an element that should be initialized or updated after a failed AJAX request. This feature is particularly useful for handling error scenarios and providing appropriate feedback or actions in your web application when a request doesn't succeed.

Syntax

<element mx-on-error="#error-element">

The value of mx-on-error should be a CSS selector that identifies the target element to be initialized or updated when an AJAX request fails.

Functionality

When an AJAX request initiated by Trongate MX fails, the framework checks for the presence of the mx-on-error attribute on the triggering element. If found, Trongate MX performs the following actions:

1. Locates the target element specified by the CSS selector in the mx-on-error attribute.
2. Triggers any page load events associated with the target element, effectively reinitializing it.

This process allows for dynamic error handling and provides a way to update the UI or perform additional actions when a request fails.

Use Cases

• Displaying error messages: Show a specific error message or update an error container when a request fails.
• Fallback content: Load alternative content when the primary request doesn't succeed.
• Retry mechanisms: Initialize a retry button or form when an initial request fails.
• Error logging: Trigger client-side error logging or reporting when requests fail.

Example

<form mx-post="api/submit_data" 
      mx-target="#result-container"
      mx-on-error="#error-message">
  <!-- Form fields -->
  <button type="submit">Submit Data</button>
</form>

<div id="result-container"></div>

<div id="error-message" 
     mx-get="api/get_error_details" 
     mx-trigger="load">
  <!-- Error message content -->
</div>

In this example:

1. If the form submission fails, the mx-on-error="#error-message" attribute is triggered.
2. This initializes the #error-message element.
3. The #error-message element has its own mx-get with mx-trigger="load", so it will fetch and display error details.

Best Practices

• Provide clear feedback: Use mx-on-error to give users clear information about what went wrong.
• Graceful degradation: Ensure your application remains functional even when requests fail.
• Combine with other attributes: Use mx-on-error in conjunction with mx-get, mx-post, and other Trongate MX attributes for comprehensive error handling.
• Keep it simple: Avoid overly complex error handling that might confuse users or impact performance.

Additional Notes

• The mx-on-error attribute is processed client-side after an AJAX request fails.
• It does not affect the initial page load behavior; it only applies to subsequent AJAX interactions.
• Multiple elements can be targeted by using a comma-separated list of selectors.
• Consider combining mx-on-error with mx-on-success for comprehensive request handling.

By utilizing mx-on-error, you can create more robust and user-friendly Trongate MX applications that gracefully handle failed requests and provide appropriate feedback or alternative actions to your users.