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">
        Get Info!
    </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">
        Get Info!
    </button>
</div>

Примечания

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