hx-select-oob

Выбирает элементы ответа для замены на странице по ID

Атрибут hx-select-oob выбирает элементы ответа для замены за пределами основной целевой области.

Используйте его, чтобы обновить несколько элементов страницы из одного ответа.

Синтаксис

Задайте список CSS-селекторов, разделённых запятыми. Добавьте :SWAP, чтобы переопределить стратегию замены для селектора.

<button hx-get="/example" hx-select-oob="#alert,#sidebar:afterbegin">
  Click Me
</button>

<button hx-get="/update" hx-select-oob="#notification">
  Update
</button>

<!-- Response would contain: -->
<!-- <div id="notification">New notification!</div> -->

htmx заменяет #notification из ответа на существующий элемент с тем же ID.

Со стратегиями замены

Для каждого выбранного элемента можно указать свою стратегию замены:

<button hx-get="/update"
        hx-select-oob="#alert:afterbegin,#count:innerHTML">
  Update Multiple
</button>

Примечания

Работает аналогично hx-swap-oob в ответе, но задаётся со стороны запроса
У выбранных элементов должен быть атрибут id, определяющий место их замены
Если стратегия замены не указана, используется значение по умолчанию outerHTML
Можно комбинировать с hx-select, чтобы также выбрать основное содержимое

См. также

Licensed under the Zero-Clause BSD License.
https://four.htmx.org/reference/attributes/hx-select-oob/