htmxを使ってみた-(12)確認ダイアローグ-

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

htmxの確認ダイアローグ(hx-confirm)

<td class="pseude_link" hx-delete="/del_institution/26/5" hx-target="#inst_26" hx-swap="delete" hx-confirm="データを削除します。
削除したデータを戻すことはできません。">x</td>

などと、hx-confirm属性を付けるだけです。
上記の例では、
タグをクリックすると、

というダイアローグが表示されます。
OKを押せば処理を実行し、キャンセルを押せば処理を行いません。
生のJavaScriptで、OK/Cancel判定をするよりも簡単です。

改行できない？
htmx ver.2.0.2では、
hx-confirm="データを削除します。\n削除したデータを戻すことはできません。"
として、改行コードを入れましたが、改行できませんでした。
改行すれば良いだけでした。