hx-include

hx-include 属性を使うと、AJAX リクエストに追加の要素値を含めることができます。この属性の値は次のとおりにすることができます:

• 含める要素の CSS クエリセレクタ。
• this で、要素の子孫を含めます。
• closest <CSS selector> で、closest の祖先要素またはそれ自身、指定された CSS セレクタと一致するものを検索します。(例: closest tr は、要素に最も近いテーブル行を対象にします)
• find <CSS selector> で、指定した CSS セレクタと一致する最初の子孫要素を検索します。
• next <CSS selector> で、指定された CSS セレクタと一致する最初要素が DOM の先にあるかをスキャンします。(例: next .error は、error クラスを持つ、最も近い次要素を対象にします)
• previous <CSS selector> で、指定された CSS セレクタと一致する最初要素が DOM の後ろにあるかをスキャンします。(例: 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 などの拡張セレクタは含める要素が最大で 1 つのみ返されます。