htmxを使ってみた-(8)要素の変更-

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

hx-swap属性による、要素の置換方法

サーバーからHTML形式の返事が来たときに、hx-target属性で指定された（指定しなければ、自分自身）要素を、ht-swap属性に指定された方法で変更します。

swap指定	要素の置換方法
innerHTML	デフォルト。要素の中身を変える
outerHTML	要素自身を変える
afterbegin	要素の中の最初の子の前に追加します
beforebegin	要素の前に追加します
beforeend	要素内の最後の子の後に追加します
afterend	要素の後に追加します
delete	要素を削除
none	何もしない

練習プログラムでは、

html04.j2

<form hx-post="/add_institution" hx-target="#add_btn" hx-swap="beforebegin">

とし、hx-swap属性に"beforebegin"を指定して、hx-target属性のid="add_btn"の前に、サーバーからの返事を追加しています。
追加される方(id="add_btn")は、

html00.j2

<tr id="add_btn" hx-on::before-swap="change_institution(event)">

とし、要素が書き換えられる前に、hx-on属性の指定に従ってchange_institution()関数を起動しています。

AJAXの戻り値の評価

サーバーのデータを、変更・削除・追加する場合、何らかのエラーが起こることがあります。
htmxはサーバーからの応答で、要素の書き換えを行いますので、書き換える前に、処理が成功したかどうかを判断する必要があります。

以下は、AJAXレスポンスを処理する１手法です。
他にもっと良い方法があると思います。（このような方法しか思いつきませんでした）

練習プログラムでは、

html00.j2

<tr id="add_btn" hx-on::before-swap="change_institution(event)">

の hx-on::before-swap で　change_institution()関数を指定し、AJAXの戻り値を評価します。

before-swapイベントで間違えたこと。
htmxの属性は付けたタグに作用する。
hx-target属性で指定した要素にhx-on::before-swapを付けなければならない。

最初、「AJAXの戻り値で、要素が書き換えられる前に評価する」ために、

<form hx-post="/add_institution" 
hx-target="#add_btn" 
hx-swap="beforebegin"
hx-on::before-swap="change_institution(event)"
>

と書きました。
目的としたことは、

formが送信されると、
hx-post属性により、HTTPのPOSTメソッドで、サーバーの/add_institutionにアクセスし、
hx-target属性により、サーバーからの応答で、idに"add_btn"を持つタグの中身を、
hx-swap属性の指定した方法（beforebegin）で書き換える前に、
hx-on属性の指定（before-swap）により、戻り値の評価ルーチン（change_institution()）を動かす

でした。

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

戻り値を評価する関数

change_institution()関数は、p00.jsにあります。

p00.js

function change_institution(event) {
	close_dialog();
	if (event.detail.xhr.status == 200) {
		// 成功時の処理
		responseText = event.detail.xhr.responseText;
		if (responseText == 'データを削除しました') {
			return;
		}
		if (!responseText.includes('<tr')) {
			alert(responseText);
			console.table(event.detail.xhr);
			event.preventDefault();
		}
	} else {
		// 失敗時の処理
		alert("サーバーとの通信に失敗しました");
		console.table(event.detail.xhr);
		event.preventDefault();
	}
}

event引数にbefore-swapイベントの値が入ってきます。
練習プログラムでは、

event.detail.xhr.statusを評価して、
サーバーで問題なければ、帰ってきた内容を吟味します。
もし、帰ってきたデータに<tr がなければ、変更・削除が失敗した（他分別のPCで書き換えられている）として、event.preventDefault()関数でJavaScriptの実行を中止＝要素を書き換えない＝で終わります。
event.detail.xhr.statusでサーバーの処理で問題がある場合、エラーを出して処理を中止します。

練習プログラムでは、「施設追加」の行の上に、新しいデータが表示されます。

htmxを使ってみた-(8)要素の変更-

hx-swap属性による、要素の置換方法

AJAXの戻り値の評価

戻り値を評価する関数

関連記事一覧