hx-include

Атрибут hx-include позволяет включать дополнительные значения элементов в запросе AJAX. Значение этого атрибута может быть:

• CSS-селектором элементов для включения.
• this , что включит потомков элемента.
• closest <CSS selector> , который найдёт ближайший предковый элемент или сам себя, соответствующий заданному CSS-селектору (например, closest tr будет выбирать ближайшую строку таблицы к элементу).
• find <CSS selector> , который найдёт первый дочерний элемент-потомок, соответствующий заданному CSS-селектору.
• next <CSS selector> , который сканирует DOM вперёд, чтобы найти первый элемент, соответствующий заданному CSS-селектору. (Например, next .error выберет ближайшего следующего брата с классом error)
• previous <CSS selector> , который сканирует DOM назад, чтобы найти первый элемент, соответствующий заданному CSS-селектору. (Например, previous .error выберет ближайшего предыдущего брата с классом error)

Вот пример, включающий отдельное значение ввода:

<div>
    <button hx-post="/register" hx-include="[name='email']">
        Register!
    </button>
    Enter email: <input name="email" type="email"/>
</div>

Этот пример немного искусственный, так как обычно оба этих элемента заключаются в form и значение отправляется автоматически, но он демонстрирует концепцию.

Обратите внимание, что если вы включаете элемент, не являющийся элементом ввода, будут включены все элементы ввода, заключённые в этом элементе.

Примечания

• hx-include наследуется и может быть помещён на родительский элемент
• Хотя hx-include наследуется, он оценивается с элемента, вызывающего запрос. Легко запутаться, работая с расширенными селекторами, такими как find и closest.

  <div hx-include="find input">
      <button hx-post="/register">
          Register!
      </button>
      Enter email: <input name="email" type="email"/>
  </div>
  

  В приведённом примере, при нажатии на кнопку, селектор find input разрешается с самой кнопки, которая здесь не возвращает никакого элемента, так как кнопка не имеет input дочернего элемента, поэтому в этом случае возникает ошибка.
• Стандартный CSS-селектор резольвится в document.querySelectorAll и включит несколько элементов, в то время как расширенные селекторы, такие как find или next, возвращают не более одного элемента для включения