data-turbo=”false”とdata: { turbo_method: :post }を同時に使いたい場合

はじめに

data-turbo="false"とdata: { turbo_method: :post }をどうしても一緒に使う必要があった時の話です。

※後述しますが、ajax化した場合ですと今回の書き方ではうまくいきません。予めご了承ください。

環境

ruby 3.2.2

rails 7.1.3.2

hotwire

Bootstrap5系

Google Map API

今回例示するアプリ画面についての説明

現在、「自分の好きな本屋を紹介し、また好きな本屋が増える事を支えるサービス」がテーマのポートフォリオを作成中です。

今回は開発途中で壁に当たった時の対処法としてここに記していきたいと思います。

今回のシチュエーション

ブックマークボタン（画像にある栞のマーク）を押すたびに、javascriptが読み込めなくなりGoogleMapが表示されなくなりました。

ブックマークを登録するためのビュー

<!-- wanna_go_bookstoresはbookmarks、wanna_goはbookmarkと思ってください -->
<%= link_to wanna_go_bookstores_path(bookstore_id: bookstore.id), id: "wanna_go-button-for-bookstore-#{bookstore.id}", data: { turbo_method: :post } do %>
  <i class="bi bi-bookmark"></i>
<% end %>

turbo-railsが働いている影響か、このままだとブックマークボタン（栞のマーク）を押すと、Google Mapが読み込めなくなります。再読み込みすると元通りになりますが、これは改善したいです。

data-turbo="false"を使う、しかし……

<div data-turbo="false"></div>で該当箇所を囲うも、このままだとエラーが出てしまいます。

どうやらdata_turbo=”false”とdata: { turbo_method: :post }は共存できないようです。

ブックマークを登録するためのビュー

<!-- data-turbo="false"とturbo_methodは共存できないようです -->
<div data-turbo="false">
<%= link_to wanna_go_bookstores_path(bookstore_id: bookstore.id), id: "wanna_go-button-for-bookstore-#{bookstore.id}", data: { turbo_method: :post } do %>
  <i class="bi bi-bookmark"></i>
<% end %>
</div>

link_toではなくbutton_toを使う

ここで私はbutton_toの存在を知りました。

button_to はデフォルトでPOSTリクエストを送るもの。

これでPOSTリクエストを送りつつ、Turboの機能を活かしたままに出来ます。

ブックマークを登録するためのビュー

　<div data-turbo="false">
<%= button_to wanna_go_bookstores_path(bookstore_id: bookstore.id), method: :post, id: "wanna_go-button-for-bookstore-#{bookstore.id}", class: "btn btn-link p-0 border-0" do %>
  <i class="bi bi-bookmark"></i>
<% end %>
</div>

※ data: { turbo_method: :post}ではなく、method: :postでないと動かない点に注意
※ また、デフォルトでbutton_toは黒い枠が現れるので、Bootstrapを使っている場合はclassで上記のように書けば枠を消すことが可能。

以上のように書けば、ブックマークボタンを押してもGoogleマップは消えず、ブックマークボタンも機能します。

deleteメソッドの場合はこちら

ブックマークを解除するためのビュー

<!-- already_goはunbookmarkと思ってください -->
<div data-turbo="false">
<%= button_to wanna_go_bookstore_path(current_user.wanna_go_bookstores.find_by(bookstore_id: bookstore.id)), method: :delete, id: "already_go-button-for-bookstore-#{bookstore.id}", class: "btn btn-link p-0 border-0" do %>
  <i class="bi bi-bookmark-fill"></i>
<% end %>
</div>

turbo-railsジェムを使ってajax化する場合は

button_toではうまくいきませんでした。
（ブックマークボタンを押すたびにリロードしないとエラーが出ます。）

試しにlink_toに戻したところ、うまく実装できました。

ブックマークを登録するためのビュー

<%= link_to wanna_go_bookstores_path(bookstore_id: bookstore.id), id: "wanna_go-button-for-bookstore-#{bookstore.id}", data: { turbo_method: :post } do %>
  <i class="bi bi-bookmark"></i>
<% end %>

※今回turbo-railsでのajax化については省略いたします。こちらの方の記事が分かりやすいので共有いたします。

まとめ

　便利な　data-turbo="false"が使えない場合の対処方法について今回記事を書いてみました。
　初心者ゆえまだ理解が浅いので、今後も理解を深めていきたいです。