htmxを使ってみた-(9)ページの再読み込み-

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

画面の再読込

HTML では、<form>、<a>タグをクリックすると画面が遷移（ページの書き換え）します。
htmxでは、hx-boost="true"属性を<form>、<a>タグに付与することで、画面全体を再読込せずに、<body>タグの中身だけを更新できるような機能があります。
<head>タグ内で、多くのCSS、JavaScript を読み込ませている場合、再度、CSSやJavaScriptを読み込み評価しなくて済むので、処理が軽くなる（？）そうです。

hx-boost属性の利用

練習プログラムでは、「データ再読み込み」ボタンとして使っています。

html00.j2

<form action="/reload_institution" method="get" hx-boost="true" style="display: inline">
	<input type="submit" value="データ再読み込み" title="施設を追加した後に実行すると、名称のヨミガナ順に並び替えます">
</form>

練習プログラムでは、追加したデータを「施設追加」ボタンの上に表示して、追加データの確認を行いやすいようにしています。

追加の確認は、ボタンのうえに出てきた方が便利ですが、名前から探す場合は、ヨミガナ順に並んでいた方が便利です。
そこで、「データ再読込み」ボタンをつくって、サーバーからヨミガナ順に並べられたデータをもらいます。

htmxを使ってみた-(9)ページの再読み込み-

画面の再読込

hx-boost属性の利用

関連記事一覧