Triggers in Trongate MX
The mx-trigger attribute in Trongate MX allows you to specify events that trigger HTTP requests. This powerful feature enhances the interactivity and responsiveness of your web application by defining when and how requests should be initiated.
Usage
Set the mx-trigger attribute on an element to control the event that triggers the request. If not specified, Trongate MX uses default events based on the element type.
Basic Example:
<button mx-get="api/data" mx-trigger="click">Get Data</button>In this example, the HTTP GET request is triggered when the button is clicked.
Default Trigger Events
When the mx-trigger attribute is not provided, Trongate MX determines the natural trigger event based on the element type. The following table shows the default trigger events for different HTML elements:
| Element Type | Default Trigger Event |
|---|---|
| form | submit |
| button | click |
| input (type="submit") | click |
| input (other types) | change |
| textarea | change |
| select | change |
| other elements | click |
Supported Events
Trongate MX listens for various events and triggers the appropriate HTTP requests based on the mx-trigger attribute:
- click
- dblclick
- change
- submit
- keyup
- keydown
- focus
- blur
Load Event
The load event is a special case that triggers the request when the page is loaded:
<div mx-get="api/initial-data" mx-trigger="load"></div>This will fetch data from the API as soon as the page loads.
- Use specific events: Specify the exact event that should trigger the request to avoid unintended behavior.
- Combine with other attributes: Use
mx-triggerin conjunction with other Trongate MX attributes likemx-get,mx-post, andmx-targetfor more complex interactions. - Consider performance: Be mindful of the frequency of triggered events to avoid excessive server load and client-side performance issues.
- Error handling: Implement appropriate error handling for failed requests to ensure a smooth user experience.
Additional Notes
- The
mx-triggerattribute is processed client-side and determines when the HTTP request should be initiated. - Multiple events can be handled by adding the
mx-triggerattribute to different elements with different event types. - For information on polling and periodic triggers, see the Polling With Trongate MX documentation.
By leveraging the mx-trigger attribute, you can create more dynamic and responsive web applications with Trongate MX, allowing for sophisticated event-driven interactions with minimal JavaScript code.