☰
Trongate MX
Documentation

Help Improve Our Docs

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.

» » »
Polling With Trongate MX

Polling With Trongate MX

Polling in Trongate MX allows you to periodically fetch updates from the server, keeping your web application's content fresh without user interaction. Ideal for real-time updates or live data feeds, polling can be controlled declaratively with attributes or programmatically via JavaScript.

Basic Usage

Use the mx-trigger attribute to start polling automatically when the page loads.

Basic Example:

This fetches data from api/live_data every 5 seconds and updates the content.

Polling Options

Trongate MX offers flexible polling options:

Option Description Example Syntax
Basic Polling Polls at a regular interval immediately. mx-trigger="every 10s"
Load Polling Polls after an initial delay, then repeats. mx-trigger="load delay:3s"
Polling with Initial Delay Delays the first poll, then uses a different interval. mx-trigger="load delay:2s, every 7s"

Time Intervals

Specify intervals using these units:

  • s: seconds
  • m: minutes
  • h: hours
  • d: days

Examples:

Every 3 Seconds:

Fetches updates every 3 seconds.

Delayed Start:

Waits 5 minutes, then polls every 5 minutes.

Custom Delay and Interval:

Waits 1 hour, then polls every 30 minutes.

Programmatic Polling

You can control polling dynamically with JavaScript using the TrongateMX API.

Starting and Stopping Polling:

Preventing Automatic Triggering:

Use mx-trigger="none" to prevent an element from responding to clicks while still allowing programmatic polling:

This pattern is especially useful for containers with clickable elements inside them or when you want complete control over when polling begins.

Advanced Example

Toggle polling based on user actions:

Clicking "Start" triggers a POST, reveals #area-2, and begins polling every 5 seconds. "Stop Polling" halts it.

Polling with Out-of-Band Swaps

Trongate MX can update multiple parts of your page with a single polling request. This is achieved by combining polling with out-of-band swaps and mx-target="none":

With this setup:

  • The main container has mx-target="none" so it won't be updated directly
  • mx-trigger="none" prevents accidental triggering when clicking the container
  • The API endpoint returns fragments that match the selectors in mx-select-oob:

Documentation pertaining to out of band swaps is available from here.

Polling State

Elements actively polling have a data-polling-active="true" attribute, which is removed when polling stops. This provides an opportunity to apply CSS styling to elements that are currently being targetted by polling. For example:

Best Practices

  • Server Load: Use reasonable intervals (5+ seconds) to avoid overloading your server.
  • Prevent Accidental Triggers: Use mx-trigger="none" when you only want programmatic polling.
  • Dynamic Control: Use startPolling and stopPolling for runtime flexibility.
  • Error Handling: Check return values (true/false) from polling methods.
  • Cleanup: Polling stops automatically when elements are removed from the DOM.

Technical Notes

  • Declarative polling (mx-trigger="every Xs") applies only to elements present on page load.
  • Programmatic polling works anytime, even on dynamically added elements.
  • Polling avoids mx-post to prevent unintended form submissions.
  • Use TrongateMX.stopAllPolling() to halt all polling globally.

Summary

Trongate MX's polling combines simple attribute-based updates with powerful JavaScript control, making it easy to build dynamic, real-time web applications.

×