Атрибут hx-select-oob

Атрибут hx-select-oob позволяет выбрать содержимое из ответа, которое будет заменено через внеплановую замену. Значение этого атрибута — это список элементов, разделённых запятыми, которые будут заменены внепланово. Этот атрибут почти всегда используется в паре с атрибутом hx-select.

Вот пример, который выбирает часть содержимого ответа:

<div>
  <div id="alert"></div>
  <button hx-get="/info"
      hx-select="#info-details"
      hx-swap="outerHTML"
      hx-select-oob="#alert">
    Получить информацию!
  </button>
</div>

Эта кнопка выполнит запрос GET к /info, затем выберет элемент с идентификатором info-details, который заменит саму кнопку в DOM, а также выберет элемент с идентификатором alert из ответа и заменит им элемент div с таким же идентификатором в DOM.

Каждое значение в списке, разделённом запятыми, может указывать на любую допустимую стратегию hx-swap с помощью разделителя : между селектором и стратегией замены.

Например, чтобы добавить контент уведомления в начало, а не заменять его:

<div>
  <div id="alert"></div>
  <button hx-get="/info"
      hx-select="#info-details"
      hx-swap="outerHTML"
      hx-select-oob="#alert:afterbegin">
    Получить информацию!
  </button>
</div>

Примечание

• hx-select-oob наследуется и может быть размещён на родительском элементе