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を使用して動いているみたいでそれが読み込まれていないと判断した。
application.jsを確認
app/javascript/packs/application.jsを確認したところ、以下のように記載されており、問題なさそうです。
require("@rails/ujs").start()SprocketsとWebpacker
そういえば以前、javascriptが読み込めないエラーが発生して、読み込んでいる部分を削除して無理やり動かしたことがあったのを思い出しました。
以下のような記事があったのですが、私はrailsの5.2を使用しているのにassetsを使用していました。
おそらくこちらが今回の根本的な原因みたいです。
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.js, application.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: "削除しますか？"} %>参考
こちらにJqueryを使わない方法が記載されていました。
コメント