こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、htmxで単一トリガーで複数リクエストする際に一つしか発行されない場合の対処法をご紹介します。
遭遇した事象
冒頭、遭遇した事象を整理します。
なお、この事象が発生したのはバージョン2.0.2以前のhtmxです。
構図は以下の通りです。
<button id="hoge" type="button">リクエスト発行</button> <!-- 発行される --> <div hx-get="/foo" hx-trigger="click from:#hoge"></div> <!-- 発行されない --> <div hx-get="/bar" hx-trigger="click from:#hoge"></div>
単一のトリガーで複数のリクエストを発行されるのが期待値です。
ところが、指定したリクエスト先のうち一つしか発行されないという事象に遭遇しました。
原因はhtmxのバグ
この事象のバグはhtmxのバグでした。
バージョン2.0.2以前に存在していたバグのようで、Pull request『Change hx-trigger's changed modifier to work for independent trigger specifications』にて修正が提案されました。
この修正は、2.0.3のリリースに含まれ、このバージョン以降では再現されなくなりました。
したがって、htmxのバージョンを2.0.3にアップグレードすることで、解決できます。
まとめ
今回は、htmxで単一トリガーで複数リクエストする際に一つしか発行されない場合の対処法をご紹介しました。
単一トリガー・複数リクエストが必要なシーンは稀有かもしれません（記事エディタでtextareaのkeyupをトリガーに自動保存機能とプレビュー機能それぞれにリクエストしたい場合など）。
一方で、htmxに関する日本語の情報がまだまだ少ない中でお困りの方もいるのではないかと思いこの記事を執筆しました。
htmxを使用される方の一助となれば幸いです。ご精読ありがとうございました。
