データを表示する
施設名をクリックすると、個別のデータをダイアローグで表示します。
施設名の内容は、例えば、
<td class="pseude_link" hx-get="/view_institution/26" hx-target="#detail" hx-on::after-request="show_dialog()">あかんだな駐車場</td>
のようにしています。
上記の例では、
- <td>タグをクリックすると、
- ht-get属性により、HTTPのGETメソッドでサーバーの/view_institution/26にアクセスし、
- ht-target属性により、サーバーからの応答で、idに"detail"を持つタグの中身を書き換え、
- hx-on属性により、AJAXのリクエストが終了した(after-request)ら、show_dialog()を呼び出します。
中身を書き換えた後のHTMLデータにも、しっかりイベントがついています。（けっこうすごい！）
pseude_linkクラスは、文字にアンダーラインを付け、カーソルの形状を変えるというもので、機能的に意味はありません。
こんな感じのダイアローグがでます。
show_dialog()では、モーダルダイアローグを表示していますので、「閉じる」ボタンを押すまで他の操作はできません。
関連記事一覧
htmxを使ってみた-(1)htmxの基本-
htmxを使ってみた-(2)準備-
htmxを使ってみた-(3)ルート関数-
htmxを使ってみた-(4)htmxを使う-
htmxを使ってみた-(5)HTMLのdialog-
htmxを使ってみた-(6)データの表示-
htmxを使ってみた-(7)データ追加-
htmxを使ってみた-(8)要素の変更-
htmxを使ってみた-(9)ページの再読み込み-
htmxを使ってみた-(10)データの変更-
htmxを使ってみた-(11)データベースの排他制御-
htmxを使ってみた-(12)確認ダイアローグ-
htmxを使ってみた-(13)データ削除-(最終)