【Ruby on rails】data-confirm で動かないdeleteメソッドが動作しない

Ruby on Rails

Ruby on railsで削除機能を実装しようとし、以下のコードを実装しましたが、どうも「削除」機能が動作しておりません。
クリックしても、詳細画面に遷移するだけでDeleteメソッドが呼び出されていません。

<% @user.posts.each do |post| %>
  <%= attachment_image_tag post, :image %>
  <%= link_to "詳細", post_path(post) %>
  <%= link_to "編集", edit_post_path(post) %>
  <%= link_to "削除", post_path(post), method: :delete, data: {confirm: "削除しますか?"} %>
<% end %>

どうもメソッドの呼び出しはjavascriptで制御しているらしく,rails-ujsを使用して動いているみたいでそれが読み込まれていないと判断した。

GitHub - rails/rails-ujs: Ruby on Rails unobtrusive scripting adapter
Ruby on Rails unobtrusive scripting adapter. Contribute to rails/rails-ujs development by creating an account on GitHub.
スポンサーリンク

application.jsを確認

app/javascript/packs/application.jsを確認したところ、以下のように記載されており、問題なさそうです。

require("@rails/ujs").start()
Rails6で、Scaffoldにて生成したDestroyボタンを押してもDELETEリクエストを送れない
### 前提・実現したいこと Scaffoldにて生成したDestroyボタンによるDELETEリクエストでデータを消したい ### 発生している問題 以下のerbから生成されたHTML

SprocketsとWebpacker

そういえば以前、javascriptが読み込めないエラーが発生して、読み込んでいる部分を削除して無理やり動かしたことがあったのを思い出しました。

ログイン ‹ nabelog — WordPress

以下のような記事があったのですが、私はrailsの5.2を使用しているのにassetsを使用していました。

おそらくこちらが今回の根本的な原因みたいです。

Ruby on Rails で sprockets から Webpacker へ移行し、移行できないものは共存させる方法 - Qiita
はじめにRails6 以降は標準のモジュールバンドラとして Webpacker が使われるようになりました。それより前に使っていた Sprockets は可能な限り Webpacker へ移行で…

webpackerに移行

古いものを使う意味がないので、思い切って移行して行きます。

以下を参考にさせていただきました。ありがとうございます。

Gemfileに追記

gem 'webpacker', '~> 5.x'

インストール

% sudo bundle install
% sudo bundle exec rails webpacker:install
% sudo bundle exec rails webpacker:install:erb

以下のようにファイルが作成されました。

      create  config/webpacker.yml
Copying webpack core config
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/environment.js
      create  config/webpack/production.js
      create  config/webpack/test.js
Copying postcss.config.js to app root directory
      create  postcss.config.js
Copying babel.config.js to app root directory
      create  babel.config.js
Copying .browserslistrc to app root directory
      create  .browserslistrc
The JavaScript app source directory already exists
       apply  /Library/Ruby/Gems/2.6.0/gems/webpacker-5.2.1/lib/install/binstubs.rb
  Copying binstubs
       exist    bin
      create    bin/webpack
      create    bin/webpack-dev-server
      append  .gitignore

エントリーポイントの移行

その前に何かエラーが出るかrailsを立ち上げてみた。

docker-compose build
docker-compose up

とりあえずエラーなく起動はできましたが、まだassetが読み込まれているようです。

エントリーポイントは基本的にapplication.jsapplication.cssになります。
※今回はapplication.scssになります。

追加しているかはconfig/initializers/assets.rbの中のRails.application.config.assets.precompileに設定されているファイルがあればそちらも対象になります。

app/views/layouts/application.html.erb でjavascriptを読み込みます。

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

app/javascript/packs/application.js に以下を追記してcssを読み込みます。

import '../stylesheets/application.scss'

これでもうまく行きません。

根本的な原因

コンソールログをみていると削除ボタンをクリックした場合もGETメソッドが動作している。
そのため

web_1  | XXX.XX.0.1 - - [15/Nov/2020:XX:XX:XX UTC] "GET /packs/js/application-66b7657302e4f3aecd86.js.map HTTP/1.1" 304 0

解決。。。?

以下に変えると一応削除は動きましたが、確認メッセージが動かないのとなんで直ったかわからないので、少しすっきりしない。

<%= link_to "削除", post_path(post), method: :delete, data: {confirm: "削除しますか?"} %>

 ↓
<%= button_to "削除", post_path(post), method: :delete, data: {confirm: "削除しますか?"} %>

参考

404 Not Found - Qiita - Qiita

こちらにJqueryを使わない方法が記載されていました。

Delete in Rails Without jQuery and UJS | Viget
You might not need jQuery and UJS. Here's one easy way to remove them from Rails.

エンジニア転職なら【Tech Stars Agent】

フリーランスを目指すなら【テックパートナーズカレッジ】

未経験者向けWEBスクール【SHElikes】

コメント