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

## データを変更するためのダイアローグ
編集欄にある * をクリックすると、
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885787/3bc98ef2-b91a-9f83-1c12-3f9adbb4a567.png)
編集ダイアローグ
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885787/b243de95-def3-1115-8800-32cb26a37e4a.png)
を出すようにします。
練習プログラムでは、
```HTML
<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](https://htmx.org/)のホームページには、[クリックしたら編集できるようにするデモ](https://htmx.org/examples/click-to-edit/)、[インライン編集のデモ](https://htmx.org/examples/edit-row/)があります。
練習プログラムの動作は
1. アスタリスク\(\<td\>タグ\)をクリックすると、
1. hx-get属性により、HTTPのGETメソッドで、サーバーの/edit_institution/26にアクセスし、
1. hx-target属性により、サーバーからの応答で、idに"detailを持つ要素"を持つタグの中身を書き換え、
1. hx-on属性の指定(after-request)により、AJAX通信が終わったら、show_dialog()関数を呼び出します。

というものです。

## サーバーの対応
サーバーでは、@router.get('/edit_institution/{ID}')で修飾してある関数で、編集するデータを成形して出力しています。
```python: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を使っています。

## データ変更
アスタリスクをクリックして出した、データ変更ダイアローグ
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3885787/9a560621-c5dd-ca14-8ad1-bda729902760.png)
の中身は、html02.j2で作っていて、
```HTML
<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タグそのものです。
新規入力ダイアローグとは若干違えてあります。
データ変更ダイアローグの、
1. 「変更」ボタン(type="submit")が押されたら、
1. hx-put属性により、HTTPのPUTメソッドで、サーバーの/update_institutionにデータを送信し、
1. hx-target属性により、サーバーからの応答で、idに"inst_26"を持つタグの中身を、
1. hx-swap属性に指定された方法（outerHTML：指定されたタグのすべて）で書き換えようとしますが、
1. idに"inst_26"を持つタグには、hx-on属性が付けてあり、内容が書き換えられる前に（before-swap）、サーバーの応答をchange_institution()関数で評価し、
1. 変更が成功していたら処理を継続、失敗していたら書き換えを中断します。

参考までに、id="inst_26"の内容は以下のとおりです。
```HTML
<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>
```

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

## 関連記事一覧
[htmxを使ってみた-(1)htmxの基本-](https://qiita.com/Final1900/items/49a8ac6f27a2427f6306)
[htmxを使ってみた-(2)準備-](https://qiita.com/Final1900/items/9e46fd6630e4bdf90a73)
[htmxを使ってみた-(3)ルート関数-](https://qiita.com/Final1900/items/293a0c8b42465bbb5142)
[htmxを使ってみた-(4)htmxを使う-](https://qiita.com/Final1900/items/f745c4cc34c8d36548f7)
[htmxを使ってみた-(5)HTMLのdialog-](https://qiita.com/Final1900/items/8584ead01e9c842cc60f)
[htmxを使ってみた-(6)データの表示-](https://qiita.com/Final1900/items/33df506cbeb5979c3cfc)
[htmxを使ってみた-(7)データ追加-](https://qiita.com/Final1900/items/a8206948e6d9ac98f105)
[htmxを使ってみた-(8)要素の変更-](https://qiita.com/Final1900/items/aefc518dacbfaf5d9a2a)
[htmxを使ってみた-(9)ページの再読み込み-](https://qiita.com/Final1900/items/783284ff1ad1d02810d5)
[htmxを使ってみた-(10)データの変更-](https://qiita.com/Final1900/items/9541c05d392b137266f3)
[htmxを使ってみた-(11)データベースの排他制御-](https://qiita.com/Final1900/items/db2a48748cd45262ac8b)
[htmxを使ってみた-(12)確認ダイアローグ-](https://qiita.com/Final1900/items/08e1fb3608d3cf0cbc8c)
[htmxを使ってみた-(13)データ削除-(最終)](https://qiita.com/Final1900/items/5389a4890e0d08549810)