Skip to content

HTMX: render element

Plugin ID: eca_htmx_element

Available since: 3.1.3

Build an HTMX-enabled element with a configurable request method, trigger, swap, target and other common HTMX attributes.

Building HTMX interactions

This action builds a single element carrying the HTMX attributes you configure (request method and URL, trigger, swap strategy, target, and more). It attaches the core/drupal.htmx library automatically. Use it for click-to-load fragments, infinite scroll, and similar interactions. For a region that refreshes on a timer, use the HTMX: poll region action instead. See Building HTMX-powered interfaces with ECA.

Fields

Request method — config key: method

The HTTP method HTMX uses for the request.
When using the "Defined by token" option, make sure there is a token with this name: eca_htmx_element_method

Type: select · Required: no · Default: get

Allowed values: get, post, put, patch, delete, _eca_token, ''

Request URL — config key: url

The URL HTMX requests. Leave empty to request the current URL. Internal paths start with a slash, for example /node/1.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Trigger — config key: trigger

The HTMX trigger definition, for example click, change or every 5s.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Swap strategy — config key: swap

The HTMX swap strategy, for example innerHTML, outerHTML or beforeend.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Target — config key: target

Optional CSS selector identifying the element that receives the swapped content.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Select — config key: select

Optional CSS selector for the content to select from the response.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Push URL — config key: push_url

Optional URL to push to the browser history, or true/false to enable or disable pushing the fetched URL.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Confirm message — config key: confirm

Optional message to show in a confirmation dialog before the request is issued.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Indicator — config key: indicator

Optional CSS selector of the element that receives the htmx-request class during the request.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Values — config key: vals

Optional values to add to the request parameters, in YAML format, for example key: "[token]".
This field supports tokens.

Type: textarea · Required: no · Default: empty string

Boost — config key: boost

When enabled, anchors and forms inside the element are progressively enhanced to use AJAX.

Type: checkbox · Required: no · Default: false

Request only the main content — config key: htmx_only

When enabled, the request is sent with the Drupal "only main content" hint, so the response is the minimal HTMX render rather than a full HTML page.

Type: checkbox · Required: no · Default: false

Initial content — config key: content

The markup shown inside the element before any swap occurs.
This field supports tokens.

Type: textarea · Required: no · Default: empty string

Wrapper tag — config key: wrapper_tag

The HTML tag of the element, for example div, button or span.
When using the "Defined by token" option, make sure there is a token with this name: eca_htmx_element_wrapper_tag

Type: select · Required: yes · Default: div

Allowed values: div, span, section, article, aside, nav, p, button, a, ul, ol, li, details, _eca_token

Machine name — config key: name

Optionally define a machine name of this render element. It will be made available under that name in the render array of the current event in scope. Nested elements can be set with using "][" brackets, for example details][title.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Token name — config key: token_name

Optionally define a token name of this render element. It will be made available under that token name for later usage. Please provide the token name only, without brackets.

Type: textfield · Required: no · Default: empty string

Element weight — config key: weight

Optionally specify an element weight. The lower the weight, the element appears before other elements having a higher weight.
This field supports tokens.

Type: textfield · Required: no · Default: empty string

Build mode — config key: mode


When using the "Defined by token" option, make sure there is a token with this name: eca_htmx_element_mode

Type: select · Required: yes · Default: append

Allowed values: set:clear, set:clear:defined, merge, prepend, append, nothing, _eca_token