#hx-trigger

hx-trigger

2024年05月04日(土)

hx-trigger には、いろいろなオプションが用意されています。

<a href="/sample/demo.html" 
hx-get="/sample/demo.html" 
hx-swap="outerHTML"
hx-trigger="mouseover">demo</a>

クリックしなくても、マウスオーバーで変わります。

demo

※ 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 を変更すると下に追加されます。

hx-trigger option

click	ユーザーが要素をクリックしたときにリクエストを発行する
change	入力フィールドやセレクトボックスの値が変更されたときにリクエストを発行する
keyup	キーボードのキーが離されたときにリクエストを発行する
keydown	キーボードのキーが押されたときにリクエストを発行する
mouseover	要素にマウスカーソルが乗ったときにリクエストを発行する
mouseout	要素からマウスカーソルが外れたときにリクエストを発行する
focus	要素がフォーカスを得たときにリクエストを発行する
blur	要素からフォーカスが外れたときにリクエストを発行する
load	要素が読み込まれたときに一度だけリクエストを発行する
submit	フォームの送信をトリガーとしてリクエストを発行する
every 3s	指定された間隔で定期的にリクエストを発行する（この場合3秒）

hx-trigger hands-on

2024年06月05日(水)

<form action="" class="acms-form" method="post">
  <input type="hidden" name="bid" value="1">
  <input type="hidden" name="cid" value="">	
  <input type="hidden" name="query" value="keyword">
  <input type="text" name="keyword" value="" placeholder="検索キーワード" class="acms-form-width-small">
  <input type="submit" name="ACMS_POST_2GET" value="検索" class="acms-btn">
</form>
<div id="result-post" class="demo">このコンテンツが変わります</div>

hx-post と同じフォームです。ここで（検索）を押さないで、キーを入力した時点 hx-trigger="keyup" で htmx を動作させることにチャレンジしてみましょう。

ヒント： hx-getの練習・hx-postの練習を参考にしてください。

このコンテンツが変わります

#hx-trigger

hx-trigger

hx-trigger option

hx-trigger hands-on

最新記事

カテゴリー

アーカイブ

#hx-trigger

hx-trigger option

最新記事

カテゴリー

アーカイブ

ハッシュタグ