Handling Successful Requests

The mx-on-success attribute in Trongate MX allows you to specify an element that should be initialized or updated after a successful AJAX request. This feature is particularly useful for triggering additional actions or updates in your web application based on the success of a previous request.

Syntax

<element mx-on-success="#target-element">

The value of mx-on-success should be a CSS selector that identifies the target element to be initialized or updated upon successful completion of the AJAX request.

Functionality

When an AJAX request initiated by Trongate MX completes successfully, the framework checks for the presence of the mx-on-success 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-success attribute.
2. Triggers any page load events associated with the target element, effectively reinitializing it.

This process allows for dynamic updates and chained actions based on successful AJAX operations.

Use Cases

• Updating related content: After successfully submitting a form, you might want to refresh a list or update a summary section.
• Triggering secondary requests: Upon successful data retrieval, you may need to fetch additional related data.
• Initializing dynamic components: After loading new content, you might need to initialize JavaScript components within that content.

Example

<form mx-post="api/submit_order" 
      mx-target="#order-confirmation"
      mx-on-success="#order-summary">
  <!-- Form fields -->
  <button type="submit">Place Order</button>
</form>

<div id="order-confirmation"></div>

<div id="order-summary" 
     mx-get="api/get_order_summary" 
     mx-trigger="load">
  <!-- Order summary content -->
</div>

In this example:

1. When the form is submitted successfully, the response is inserted into #order-confirmation.
2. The mx-on-success="#order-summary" attribute then triggers the initialization of the #order-summary element.
3. Since #order-summary has its own mx-get with mx-trigger="load", it will fetch and display updated order summary information.

Best Practices

• Use specific selectors: Ensure your CSS selectors in mx-on-success are specific to avoid unintended side effects.
• Combine with other Trongate MX attributes: mx-on-success works well in conjunction with attributes like mx-get, mx-post, and mx-trigger.
• Consider performance: Be mindful of chaining too many actions, as it may impact application performance.
• Error handling: Remember that mx-on-success only triggers on successful requests. Implement appropriate error handling for failed requests.

Additional Notes

• The mx-on-success attribute is processed client-side after the AJAX request completes successfully.
• 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.

By leveraging mx-on-success, you can create more dynamic and interconnected user interfaces in your Trongate MX applications, allowing for sophisticated update patterns with minimal JavaScript code.