Rails7 でデータの削除時に confirm が出ない
Ruby on Rails 7 で、アプリケーションを scaffold で作成中です。
そこで、データの削除時に confirmのメッセージが出ない事象に遭遇しました。
Rails 7 になってから、turbo が動くようになったことが原因のようです。
以前、button_to でも以下のように「削除時の確認メッセージが出ない」で遭遇していたのですが、今回は link_to で発生していたのに気が付きました。
link_to では、「Show」のページが表示されるだけだったので、そんな動作なのかと勝手に理解していましたが、ソースを見ても method: :delete を指定しており変だと思っていました。
turbo への対応として、以前 form ではオフにすることもしました。
今回 confirm のメッセージが出るように link_to に対応したのと、直ぐに忘れてしまうので button_to も併せて対応を記録しておこうと思います。
発生した環境
発生した環境の ruby と rails のバージョンは、以下のものです。
C:\Windows\System32>ruby -v ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x64-mingw-ucrt] C:\Windows\System32>rails -v Rails 7.0.3.1
button_to
まずは、button_to への対応についてです。
以前に参考にさせていただいたページが無くなっていたので、改めて別のページを参考にしました。
修正前
事象としては、「Destroy this userid」ボタンをクリックすると、確認メッセージ「'Are you sure?'」が出ずに削除されてしまいます。
erb ソース
<%= button_to "Destroy this userid", @userid, {method: :delete, data: {confirm: 'Are you sure?'}} %>
生成された html
<form class="button_to" method="post" action="/userids/1">
<input type="hidden" name="_method" value="delete" autocomplete="off" />
<button data-confirm="Are you sure?" type="submit">Destroy this userid</button>
<input type="hidden" name="authenticity_token" value="・・・" autocomplete="off" />
</form>
修正後
「 data: {confirm: 」の部分を、「 form: {data: {turbo_confirm: 」に修正します。
以下のように変更することで、confirmメッセージが表示されるようになりました。
erb ソース
<%= button_to "Destroy this userid", @userid, {method: :delete, form: {data: {turbo_confirm: 'Are you sure?'}}} %>
生成された html
<form data-turbo-confirm="Are you sure?" class="button_to" method="post" action="/userids/1">
<input type="hidden" name="_method" value="delete" autocomplete="off" />
<button type="submit">Destroy this userid</button>
<input type="hidden" name="authenticity_token" value="・・・" autocomplete="off" />
</form>
buttonタグにあった data-confirm が、formタグの data-turbo-confirm に移動しています。
link_to
link_to についても、button_to と同様にならないか試してみました。
修正前
method: :delete を指定しているので、route.rb の設定から useridコントローラーの destroyメソッドに遷移するはずが、何故か showメソッドが呼び出されています。
Rails のコンソールで見ても、GET になっています。
erb ソース
<%= link_to 'Destroy', userid, method: :delete, data: {confirm: 'Are you sure?'} %>
生成された html
<a data-confirm="Are you sure?" rel="nofollow" data-method="delete" href="/userids/1">Destroy</a>
修正後
button_toと同じように、「 data: {confirm: 」の部分を「 form: {data: {turbo_confirm: 」に修正しましたが、結果は変わりませんでした。
そこで、以下のページを参考にしました。
以下のように変更しました。
erb ソース
<%= link_to 'Destroy', userid, data: {turbo_method: 'delete', turbo_confirm: 'Are you sure?'} %>
生成された html
<a data-turbo-method="delete" data-turbo-confirm="Are you sure?" href="/userids/1">Destroy</a>
confirm メッセージが出るようになり、「OK」をクリックすることで削除されました。
また、Rails のコンソールでも DELETE が開始されています。
以上、Ruby on Rails にっいて、また経験したことが有れば別のページに載せていきたいと思います。
