Q&A
create.js.erb の先頭に alert("ok") を追加して
いいねを送信するとアラートが表示されますか？
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
オリジナルアプリで非同期でいいね機能を実装したいのですがリロードしないと表示が切り替わらないです。
エラー文
いいね!ボタンを押すと出てました。
VM256:1 Uncaught ReferenceError: $ is not defined at <anonymous>:1:1 at processResponse (rails-ujs.js:283) at rails-ujs.js:196 at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
該当のソースコード
likesController
1class LikesController < ApplicationController 2 before_action :ramen_params 3 def create 4 Like.create(user_id: current_user.id, ramen_id: params[:id]) 5 end 6 7 def destroy 8 Like.find_by(user_id: current_user.id, ramen_id: params[:id]).destroy 9 end 10 11 private 12 13 def ramen_params 14 @ramen = Ramen.find(params[:id]) 15 end 16end 17
ramen controller
class RamenController < ApplicationController before_action :authenticate_user!, except: [:index, :show, :search] before_action :set_ramen, only: [:show, :edit, :update,:destroy] before_action :move_to_edit, only: [:edit,:update] def index @ramen = Ramen.all.order("created_at DESC") end def new @ramen = Ramen.new end def create @ramen = Ramen.new(ramen_params) if @ramen.save redirect_to root_path else render :new end end def show @comment = Comment.new @comments = @ramen.comments.includes(:user) end def edit end def update if @ramen.update(ramen_params) redirect_to raman_path else render :edit end end def destroy @ramen.destroy redirect_to root_path end def search @ramen = Ramen.search(params[:keyword]) end private def ramen_params params.require(:ramen).permit(:store_name,:ramen_name,:star_id, :image,:text).merge(user_id: current_user.id) end def set_ramen @ramen = Ramen.find(params[:id]) end def move_to_edit unless current_user.id == @ramen.user_id redirect_to root_path end end end
like.rb
class Like < ApplicationRecord belongs_to :user belongs_to :ramen validates :ramen_id, uniqueness: { scope: :user_id } end
ramen.rb
class Ramen < ApplicationRecord belongs_to :user has_many :likes, dependent: :destroy has_many :comments, dependent: :destroy has_one_attached :image def self.search(search) if search != "" Ramen.where('store_name LIKE(?)', "%#{search}%") Ramen.where('ramen_name LIKE(?)', "%#{search}%") else Ramen.all end end extend ActiveHash::Associations::ActiveRecordExtensions belongs_to :star validates :ramen_name,:image,:store_name,:star_id, presence: true validates :star_id, numericality: { other_than: 1 , message: "を入力してください"} end
user.rb
class User < ApplicationRecord has_many :ramens, class_name: 'Ramen' has_many :likes has_many :comments devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable validates :nickname, presence: true def liked_by?(ramen_id) likes.where(ramen_id: ramen_id).exists? end end
views>likes>_like.html.erb
<% if user_signed_in? %> <% if current_user.liked_by?(ramen.id) %> <div class = 'likes'> <%= link_to destroy_like_path(ramen), method: :DELETE, remote: true do %> <div class="fa fa-heart unlike-btn"></div> <% end %> <div class= 'likenum'><%= ramen.likes.count %></div> </div> <% else %> <div class = 'likes'> <%= link_to create_like_path(ramen), method: :POST, remote: true do %> <i class="fa fa-heart like-btn"></i> <% end %> <div class= 'likenum'><%= ramen.likes.count %></div> </div> <% end %> <% end %>
views>likes>create.js.erb
$('#likes_buttons_<%= @ramen.id %>').html("<%= j(render partial: 'likes/like', locals: {ramen: @ramen}) %>");
views>likes>destroy.js.erb
$('#likes_buttons_<%= @ramen.id %>').html("<%= j(render partial: 'likes/like', locals: {ramen: @ramen}) %>");
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)
ramen>index.html.erb
<header id='header'> <script src="index.js"></script> <% unless user_signed_in? %> <div class='login'> <%= link_to new_user_session_path do %> <button class="btn">ログイン</button> <%end%> <%= link_to new_user_registration_path do %> <button class="btn1">新規登録</button> <%end%> </div> <% else %> <div class='logout'> <%= link_to current_user.nickname + 'さん', user_path(current_user.id), class: "topbtn1"%> <%= link_to destroy_user_session_path, method: :delete do %> <button class="btn">ログアウト</button> <%end%> <%= link_to new_raman_path do %> <button class="btn1">投稿する</button> <%end%> </div> <% end %> </header> <div class = 'toppege'> <div class='main'> <%= image_tag "2-1.jpg", class:"noren" %> </div> <div class="loading-icon"> <%= image_tag "なると.jpeg", class:"naruto-icon" %> </div> <div class= 'main-contents'> <div class='content'>投稿一覧</div> <%= form_with(url: search_ramen_path, local: true, method: :get, class: "search-form") do |form| %> <%= form.text_field :keyword, placeholder: "投稿を検索する", class: "search-input" %> <%= form.submit "検索", class: "search-btn" %> <% end %> <ul class='ramen-contents'> <% @ramen.each do |ramen| %> <li class='list'> <%= link_to raman_path(ramen.id) do%> <div class='ramen-img-content'> <%= image_tag ramen.image, class: 'ramen-image' if ramen.image.attached? %> </div> <% end %> <div class = 'ramen-info'> <div class = 'store'> <%= '店名:' + ramen.store_name %> <div class="name"> <%= '商品名:' + ramen.ramen_name %> </div> <div class="star"> <%= 'オススメ度:' + ramen.star.name %> </div> <div id="likes_buttons_<%= ramen.id %>"> <%= render partial: 'likes/like', locals: {ramen: ramen} %> </div> </div> </li> <% end %> </ul> </div> <footer> <div class="copyright"> <p>© 2020 - Organisation</p> </div> <div class="social"> <a href="#" class="support">Contact </a> <a href="#" class="face">f</a> <a href="#" class="tweet">t</a> <a href="#" class="linked">in</a> </div> </footer> </div>
routes.rb
Rails.application.routes.draw do devise_for :users root to: 'ramen#index' resources :ramen do resources :comments, only: :create collection do get 'search' end end resources :users, only: :show do member do get :likes end end post 'like/:id' => 'likes#create', as: 'create_like' delete 'like/:id' => 'likes#destroy', as: 'destroy_like' end
試したこと
調べて出てきたやつを記述しましたがうまくいかなかったです。
エラーメッセージは出ていないのですね？
logを見ることをおすすめします
アラートが表示はされなかったです。
またエラーメッセージは出ていません。
どうすれば良いのでしょうか
Uncaught ReferenceError: $ is not defined
ログにはこう書かれていました。
そのエラーはいいねすると表示されるのでしょうか？
log もう少し全体像をみせて
jquery がグローバルに読み込めてないみたいですね。
いいかどうかはおいておいて、application.html.erb から jquery を読み込めば何か変化するかもしれません。
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
それが原因でした！ありがとうございます！
無事実装できました！
回答2件
0
自己解決
application.html.erb から jquery を読み込ができていなかったです！
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>をapplication.html.erbに記入すればいけました！
投稿2021/09/06 13:23
総合スコア3
0
考え方は２つ
- APIに送ったら強制的に表示を切り替える
- APIからの戻り値をみて表示を切り替える
どちらでも大差はないと思います
投稿2021/09/06 08:48
総合スコア114779
例えばどのようにすればいいのでしょうか？
仕様がわからないのでなんとも・・
・いいねぼたんはHTMLのどこの部分か
・切り替えるとどこが変化するのか？
・APIに何を送るのか
を調べて、click時に切り替え処理を適当にいれるだけでしょう
ありがとうございます。
少し自分で考えてやってみます！
あなたの回答
tips
プレビュー
