If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.
Please report issues or suggest improvements on GitHub. Community input is invaluable in making the docs stronger.
Not comfortable with GitHub? No problem — you can also get in touch with us directly via our contact form. We welcome all feedback.
Triggering Multiple Elements
The previous page covered how to update/trigger one element after a successful HTTP request has been made. This was achieved by using the mx-on-success attribute.
With mx-on-success it's also possible to trigger multiple elements by separating their selectors with spaces. Here's an example:
For those who prefer to work with pure HTML, here's an alternative syntax that produces the same result:
You may have noticed that in the examples shown, the elements to be triggered have all been given the attribute, mx-trigger="activate".
The reason for this is to prevent default trigger behaviour from activating the target elements. By adding mx-trigger="activate", we are effectively saying, "This element should only be activated when it is programmatically triggered by another element."
If we did not include mx-trigger="activate" on the elements, they could potentially be triggered by clicks, which is - of course - not desirable.
Understanding The Code
In this example, when the form submission is successful:
- The order confirmation message appears in the target div.
- The order summary gets refreshed.
- The customer's balance is updated.
- The recent orders list is refreshed.
All of these updates happen simultaneously, making it perfect for situations where you need to refresh multiple pieces of information after a successful operation.
Conclusion
Fully appreciating the power of mx-on-success requires a touch of imagination.
Picture an exceptionally sophisticated admin panel for a powerful web application.
Now, imagine a demanding client requesting a feature that updates multiple sections of a page entirely independently of one another.
For instance, one part of the page could display a live stock market chart, another part of the page could display real-time enquiries, a third part of the page might track the price of Bitcoin, and yet another part of the page could display internal messages sent by logged-in users.
Building such a dynamic application without Trongate MX would be an immense challenge! Even for a JavaScript guru, it would involve wrangling with observables, subscriptions, and multiple layers of complex, esoteric code.
Fortunately, Trongate MX simplifies this process. Now, you can effortlessly declare and activate the components you need, making even the most demanding applications easy to build.
This is why the mx-on-success attribute is arguably one of the most important features in Trongate MX.