Events and refreshing

Events in HX-Trigger are dispatched on the element that sent the request and bubble up to body. Other parts of the page can listen to them with hx-trigger="<event> from:body". The notification bell uses this together with polling:

<span id="anvil-notification-count"
    hx-post="<?= esc($endpoint, 'attr') ?>" hx-vals="<?= $vals('count') ?>"
    hx-trigger="every 60s, anvil:notifications from:body"
    hx-target="this" hx-swap="innerHTML"><?= $badge ?></span>

The readAll action answers with ComponentResponse::html(…)->withEvent('anvil:notifications'), and the count reloads. Use your own event names (e.g. app:tickets) for your own components; a read-only count action (mutates: false) keeps polling out of the audit log.

Polling

Mark polling elements with data-anvil-poll. When a poll fails (e.g. the token of an idle page expired), anvil.js stops the polling of that element quietly instead of showing an error every minute.

Polling requests count against the rate limit of the endpoint (anvil.endpointRateLimit, requests per minute and IP), and the token of a page that stays open expires after componentTokenTtl.

Listening in your own scripts

Events are DOM events on body; the payload is event.detail:

public/js/app.js

document.body.addEventListener('app:tickets', (event) => {
  console.debug('tickets changed', event.detail);
});

Events of Anvil

Event	Effect
anvil:notify	shows a toast (message, type)
anvil:notifications	reloads the count of the notification bell
anvil:theme	dispatched on document by the theme switch; charts redraw themselves