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.
On Trigger Operations
The mx-on-trigger attribute in Trongate MX allows you to execute your own custom JavaScript functions
immediately after a trigger event occurs, but before any HTTP request is made. This enables you to
perform actions like showing messages, manipulating the page, or performing checks before a request begins.
Basic Usage
The mx-on-trigger attribute works alongside other Trongate MX attributes like
mx-get or mx-post. It executes your specified JavaScript function
when the trigger event (like a click) happens, but before any HTTP request is invoked by Trongate MX.
Simple Example:
In the following example, when the button is clicked, the user sees a "Hello" pop-up alert before the system fetches data from the target URL.
Here's how the code looks when written entirely in HTML:
As a reminder, there's no obligation to use Trongate's form helpers when working with Trongate MX.
This means that you can use Trongate form helpers (like form_button()) or, alternatively, you can work with pure HTML.
Passing Event Information Into Functions
Functions invoked by mx-on-trigger automatically receive event information related to the trigger.
This allows for greater flexibility, such as dynamically interacting with the clicked element.
Example Of Automatic Event Handling
In this example, the JavaScript function buildCustomSpinner gets invoked the moment after the form button is clicked (and before a response has been received from any API endpoint!). The following JavaScript code could be used to test this basic functionality.
Practical Example Using Event Information
Here's a more practical implementation where the triggering button is disabled and a loading class is added:
More Examples
1. Scroll to Top Before Loading
This example shows how to smoothly scroll the page back to the top before loading new content into a target element.
Here's an alternative syntax for developers who prefer to work with pure HTML:
2. Simple Confirmation Check
This example demonstrates how to implement a confirmation dialog before proceeding with a checkout process, preventing the HTTP request if the user cancels.
Here's how the code looks when written without using any of Trongate's form helper functions:
Advanced Usage: Async Functions
3. Async Inventory Check Example
This example demonstrates how to use an async function to check inventory status before proceeding with a submission, preventing the request if the item is out of stock.
Here's an alternative syntax for those who prefer to work with pure HTML:
If you're not familiar with async/await, stick to regular functions like in the earlier examples - they'll work fine for most use cases!
Summary
The mx-on-trigger attribute provides a way to run custom JavaScript code before Trongate MX
invokes HTTP requests. You can use it for simple tasks like showing messages or scrolling the page,
or for more complex tasks like validation. The event object is automatically passed to your functions,
giving you access to information about the triggering element. By throwing errors in your functions,
you can prevent requests from proceeding when needed.