<a href="/sample/demo.html" hx-get="/sample/demo.html">demo</a>
<h3>demo</h3> <p>This file was loaded via Ajax using htmx technology. This file was loaded via Ajax using htmx technology. This file was loaded via Ajax using htmx technology.</p>
読み込まれるコンテンツに リンク が残り、demo の文字列だけが置き換わったことが確認できます。
<a href="/sample/demo.html" hx-get="/sample/demo.html" hx-swap="outerHTML">demo</a>
※ hx-swap を outerHTML から afterend に変更してみましょう！
| innerHTML | 対象要素の内部HTMLを置き換えます。（default） |
|---|---|
| outerHTML | ターゲット要素全体を置き換えます。 |
| afterbegin | ターゲット内の最初の子の前にコンテンツを追加します。 |
| beforebegin | ターゲットの親要素のターゲットの前にコンテンツを追加します。 |
| beforeend | ターゲット内の最後の子の後にコンテンツを追加します。 |
| afterend | ターゲット親要素のターゲットの後にコンテンツを追加します。 |
| delete | 応答に関係なくターゲット要素を削除します。 |
| none | 応答からコンテンツを追加しません。 |
hx-trigger には、いろいろなオプションが用意されています。
<a href="/sample/demo.html" hx-get="/sample/demo.html" hx-swap="outerHTML" hx-trigger="mouseover">demo</a>
クリックしなくても、マウスオーバーで変わります。
※ hx-trigger を mouseover から every 3s に変更してみましょう！
<select name="sample" hx-get="/sample/demo.html" hx-swap="afterend" hx-trigger="change"> <option value="aaa">aaa</option> <option value="bbb">bbb</option> <option value="ccc">ccc</option> </select>
SELECT を変更すると下に追加されます。
| click | ユーザーが要素をクリックしたときにリクエストを発行する |
|---|---|
| change | 入力フィールドやセレクトボックスの値が変更されたときにリクエストを発行する |
| keyup | キーボードのキーが離されたときにリクエストを発行する |
| keydown | キーボードのキーが押されたときにリクエストを発行する |
| mouseover | 要素にマウスカーソルが乗ったときにリクエストを発行する |
| mouseout | 要素からマウスカーソルが外れたときにリクエストを発行する |
| focus | 要素がフォーカスを得たときにリクエストを発行する |
| blur | 要素からフォーカスが外れたときにリクエストを発行する |
| load | 要素が読み込まれたときに一度だけリクエストを発行する |
| submit | フォームの送信をトリガーとしてリクエストを発行する |
| every 3s | 指定された間隔で定期的にリクエストを発行する （この場合3秒） |
