htmxを使ってみた-(4)htmxを使う-

Last updated at 2024-10-22Posted at 2024-10-22

htmxを使う

練習プログラムでは、一覧表の１行を次のように出力しています。

<tr id="inst_26" hx-on::before-swap="change_institution(event)">
	<td class="pseude_link" hx-get="/view_institution/26" hx-target="#detail" hx-on::after-request="show_dialog()">あかんだな駐車場</td>
	<td>高山市奥飛騨温泉郷平湯791番地38</td>
	<td>有料駐車場、バス待合所</td>
	<td></td>
	<td></td>
	<td class="pseude_link" hx-get="/edit_institution/26" hx-target="#detail" hx-on::after-request="show_dialog()">*</td>
	<td class="pseude_link" hx-delete="/del_institution/26/5" hx-target="#inst_26" hx-swap="delete" hx-confirm="データを削除します。削除したデータを戻すことはできません。">x</td>
</tr>

上記の２行目

<td class="pseude_link" hx-get="/view_institution/26" hx-target="#detail" hx-on::after-request="show_dialog()">あかんだな駐車場</td>

の意味は、

<td>要素がクリックされたら、
hx-get属性により、HTTPのGETメソッドで/view_institution/26にアクセスし、
hx-target属性により、サーバーからの応答で idに"detail"を持つ要素(の中身を書き換え、
hx-on属性により、AJAX終了後(after-request)に、JavaScriptのshow_dialog()関数を呼び出します。

show_dialog()関数はp00.jsにあります。
ht-get などと一緒によく使われると思われる属性には次のようなものがあります。

htmx属性	内容
hx-target	サーバーからの応答を書き換える要素を指定。デフォルトは自分自身ターゲットはCSSセレクタの形式で指定
hx-swap	要素を書き換える方法。デフォルトは中身を書き換える。９種類用意されている
hx-on	イベントを設定する。要素が書き換えられたらなど多くのイベントを設定することができる

hx-onで指定するイベント名について
htmxのホームページには、イベントの名前をキャメルケース（afterRequestなど）で書いてありますが、指定するときにはケバブケース（after-requestなど）にしないといけないようです。

htmxを使ってみた-(4)htmxを使う-

htmxを使う

関連記事一覧