Header Small Ahoy!

Triggers in Trongate MX

Trongate MX uses event triggers to determine when to initiate HTTP requests. The triggering behavior is built into the framework's event handling system, allowing for dynamic and responsive web applications.

Understanding Triggers in Trongate MX

Trongate MX listens for specific events on elements with attributes like mx-get, mx-post, etc. When these events occur, Trongate MX initiates the corresponding HTTP request.

Supported Events

Trongate MX supports the following standard DOM events:

  • click: Triggered when the element is clicked
  • dblclick: Triggered when the element is double-clicked
  • change: Triggered when the value of an input element changes
  • submit: Triggered when a form is submitted
  • keyup: Triggered when a key is released
  • keydown: Triggered when a key is pressed down
  • focus: Triggered when an element receives focus
  • blur: Triggered when an element loses focus
  • load: Triggered only upon initial page load

Default Behaviors

If no specific event is specified, Trongate MX uses default behaviors based on the element type:

  • For <form> elements: submit
  • For <input> elements of type "submit": click
  • For other <input>, <textarea>, and <select> elements: change
  • For all other elements: click

Regarding Initial Page Loads

mx-trigger="load"

The mx-trigger="load" attribute is a special trigger in Trongate MX that is used to initiate an HTTP request immediately and only upon the initial page load. This is particularly useful for initializing content without user interaction when the page first loads.

Example: Loading content on initial page load

<div mx-get="<?= BASE_URL ?>api/get_initial_data" 
     mx-trigger="load" 
     mx-target="#initial-content">
</div>

In this example, Trongate MX will automatically make a GET request to the specified URL when the page initially loads and populate the #initial-content element with the response.

Important: The mx-trigger="load" attribute is only invoked upon the initial page load. It will not trigger on subsequent DOM updates, dynamic content insertions, or page refreshes. This behavior is specific to Trongate MX and differs from HTMX.

Form Submission

For form submissions, Trongate MX automatically handles the submit event:

<form mx-post="<?= BASE_URL ?>api/submit_data" 
      mx-target="#message-area" 
      mx-indicator=".spinner">
  <!-- form fields here -->
  <button type="submit">Submit</button>
</form>

Advanced Usage: Multiple Triggers

Trongate MX allows you to specify multiple triggers for a single element. This can be useful for creating more complex interactions.

<input type="text" 
       mx-get="<?= BASE_URL ?>api/search" 
       mx-trigger="keyup changed delay:500ms, load" 
       mx-target="#search-results">

In this example, the search will be triggered:

  • 500ms after the user stops typing (debounce)
  • When the input value changes
  • Immediately when the page initially loads (but not on subsequent updates)

Best Practices

  • Use Appropriate Triggers: Choose triggers that make sense for the user interaction you're designing.
  • Leverage Initial Load: Use mx-trigger="load" for content that should be fetched immediately when the page first loads.
  • Consider Performance: Be cautious with triggers like 'keyup' on text inputs, which can lead to many requests. Use debouncing when appropriate.
  • Combine with Other Attributes: Use triggers in conjunction with other Trongate MX attributes for more sophisticated interactions.
  • Provide Visual Feedback: Use mx-indicator to show loading states, especially for actions that might take some time.

Notes

  • Trongate MX automatically prevents default form submission behavior.
  • The framework handles showing and hiding of loader elements specified by mx-indicator.
  • For non-form elements, the default trigger is typically a click event.
  • The 'load' trigger in Trongate MX is specific to initial page loads and behaves differently from the standard DOM 'load' event.

Summary

Understanding how Trongate MX handles events and triggers is crucial for creating interactive and responsive web applications with minimal custom JavaScript. The mx-trigger="load" attribute provides a unique way to initialize content on the first page load. By leveraging the built-in trigger system and combining it with other Trongate MX attributes, you can create rich, dynamic user experiences efficiently, while being mindful of the specific behavior of the 'load' trigger.