前提・実現したいこと
プログラミング初学者です。現在オリジナルのアプリを制作しています。
https://qiita.com/fumikao/items/373caa60b77f27f2dbdd
こちらを参考に非同期でのいいね機能を実装しました。ローカル環境ではうまく動いたのですが、herokuで本番環境にデプロイすると、クリックしても動かない状態になります。解決方法教えていただけますでしょうか。
該当のソースコード
==============================app/view/layouts/application.html.erb=============================== <!DOCTYPE html> <html> <head> <title>Viewhome</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <%= render 'layouts/shim' %> </head> <body> <%= render 'layouts/header' %> <div class="container"> <% flash.each do |message_type, message| %> <div class="alert alert-<%= message_type %>"><%= message %></div> <% end %> </div> <%= yield %> </body> </html> ================================app/javascript/packs/application.js============ // This file is automatically compiled by Webpack, along with any other files // present in this directory. You're encouraged to place your actual application logic in // a relevant structure within app/javascript and only use these pack files to reference // that code so it'll be compiled. require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require("jquery") // Uncomment to copy all static images under ../images to the output folder and reference // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) // or the `imagePath` JavaScript helper below. // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) //= require jquery //= require rails-ujs //= require_tree . ===============================app/view/users/_like.html.erb======================================= <% if Like.find_by(user_id: current_user.id, post_id: @post.id) %> <%= link_to "/posts/#{@post.id}/likes", method: :delete, remote: true do %> <span class="fa fa-heart like-btn-unlike"></span> <% end %> <% else %> <%= link_to "/posts/#{@post.id}/likes", method: :post, remote: true do %> <span class="fa fa-heart like-btn"></span> <% end %> <% end %> <%= @post.likes.length %> =====================================like_controller.erb===================================== class LikesController < ApplicationController before_action :logged_in_user before_action :set_post def create @like = Like.create(user_id: current_user.id,post_id: @post.id) end def destroy @like=Like.find_by(user_id: current_user.id, post_id: @post.id) @like.destroy end private def set_post @post = Post.find(params[:post_id]) end end
試したこと
https://qiita.com/avicii2314/items/1c51f506678c6a3e6bc3
こちらを参考に<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>をapp/view/layouts/application.html.erbに追加したのですが変化ありませんでした。
補足情報(FW/ツールのバージョンなど)
Rails 6.0.3.2
ruby 2.7.1
ubuntu 18.04 LTS
回答1件
あなたの回答
tips
プレビュー