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.