htmxを使ってみた-(10)データの変更-

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

データを変更するためのダイアローグ

編集欄にある * をクリックすると、

編集ダイアローグ

を出すようにします。
練習プログラムでは、

<td class="pseude_link" hx-get="/edit_institution/26" hx-target="#detail" hx-on::after-request="show_dialog()">*</td>

として、編集欄のアスタリスクに、hx-get属性、 hx-target属性、 hx-on 属性を付けます。
class="pseude_link"は、アスタリスクに下線を付け、マウスを持って行くとカーソルを変えるようにするクラスの指定で、プログラム的な意味はありません。
hxmxのホームページには、クリックしたら編集できるようにするデモ、インライン編集のデモがあります。
練習プログラムの動作は

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

というものです。

サーバーの対応

サーバーでは、@router.get('/edit_institution/{ID}')で修飾してある関数で、編集するデータを成形して出力しています。

p02.py

@router.get('/edit_institution/{ID}')
def edit_institution(ID:int):
	'''指定されたデータを、編集フォームを作って送信する
	- ID : データの番号
	- return : 詳細データ HTML形式
	'''
	conn = mydb.connect(**config.database)
# (中略)
	# <dialog>の中身作成
	template = env_j2.get_template('html02.j2')
	content = template.render(institution=institution)

	# データを返す
	return HTMLResponse(content=content)

テンプレートとして、html02.j2を使っています。

データ変更

アスタリスクをクリックして出した、データ変更ダイアローグ

の中身は、html02.j2で作っていて、

<form hx-put="/update_institution" hx-target="#inst_26" hx-swap="outerHTML">
	<table style="width:27rem">
 <!-- 中略 -->
	</table>
	<div class="right_button">
		<input type="reset" value="リセット">
		<input type="submit" value="　変更　">
		<input type="button" value="閉じる" onclick="close_dialog()" autofocus>
	</div>
</form>

と、formタグそのものです。
新規入力ダイアローグとは若干違えてあります。
データ変更ダイアローグの、

「変更」ボタン(type="submit")が押されたら、
hx-put属性により、HTTPのPUTメソッドで、サーバーの/update_institutionにデータを送信し、
hx-target属性により、サーバーからの応答で、idに"inst_26"を持つタグの中身を、
hx-swap属性に指定された方法（outerHTML：指定されたタグのすべて）で書き換えようとしますが、
idに"inst_26"を持つタグには、hx-on属性が付けてあり、内容が書き換えられる前に（before-swap）、サーバーの応答をchange_institution()関数で評価し、
変更が成功していたら処理を継続、失敗していたら書き換えを中断します。

参考までに、id="inst_26"の内容は以下のとおりです。

<tr id="inst_26" hx-on::before-swap="change_institution(event)">
<!-- 中略 -->
	<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="closest tr" hx-swap="delete swap:1s" hx-confirm="データを削除します。削除したデータを戻すことはできません。">x</td>
</tr>

hx-on::before-swapの重要な注意
上記の場合、hx-targetで自身とは違う要素を指定していますので、自身はAJAXの戻り値で書き換えられることはなく、before-swapイベントが発火しません。
hx-on::before-swap=""は、hx-target=""で指定した要素に付ける必要があります。

htmxを使ってみた-(10)データの変更-

データを変更するためのダイアローグ

サーバーの対応

データ変更

関連記事一覧