質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

受付中

非同期でいいね!をする

tomtom1
tomtom1

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

1回答

0評価

0クリップ

8閲覧

投稿2018/12/03 22:26

編集2022/01/12 10:55

タイトル通りですが、ajaxを使って、画面の更新無しにいいねをしたいです。
その際は、ボタンの色といいね数を変更させたいです。

https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2
などを参考作ったりもしたのですが、全く反応がなく困っています。
(いいねのcreate/destroyもボタンや数の変化の反応)

また他のサイトに記載のコードでも試したのですが、うまく行っていません。
jsを取り入れる前にRailsでは何か設定しないといけないとかあるのでしょうか。

Model

class Like < ApplicationRecord belongs_to :user belongs_to :post, counter_cache: :likes_count end

Controller

class PostsController < ApplicationController def index @posts = Post.all.order(created_at: :desc) @post = Post.find_by(id: params[:id]) @likes_count = Like.where(post_id: @post).count end class LikesController < ApplicationController def create @like = Like.create(user_id: @current_user.id, post_id: params[:post_id]) @likes = Like.where(post_id: params[:post_id]) @posts = Post.all end def destroy @like = Like.find_by(user_id: @current_user.id, post_id: params[:post_id]) @like.destroy @likes = Like.where(post_id: params[:post_id]) @posts = Post.all end end

View

<% if Like.find_by(user_id: @current_user.id, post_id: post.id) %> <%= link_to("/likes/#{post.id}/destroy", :method => :post, id: "like-button", remote: true ) do %> <span class="fa fa-heart fa-2x like-btn-unlike"></span> <span><%= @likes_count %></span> <% end %> <% else %> <%= link_to("/likes/#{post.id}/create", :method => :post, id: "like-button", remote: true) do %> <span class="fa fa-heart fa-2x like-btn"></span> <span><%= @likes_count %></span> <% end %> <% end %>

js

create.js.erb $("#like-buttons").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like}) %>") destroy.js.erb $("#like-buttons").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes }) %>");

jsファイルはview/likesに保存されています。
jsは全くいじってこなかったのですが、初心者でも作れるいいね!機能のやり方を教えてください。

追記:
実際にいいねボタンを押すと、このようなエラーがコンソールで出ています。

error

ActionView::Template::Error (Missing partial likes/_like, application/_like with {:locale=>[:ja], :formats=>[:js, "application/ecmascript", "application/x-ecmascript", :html, :text, :css, :ics, :csv, :vcf, :vtt, :png, :jpeg, :gif, :bmp, :tiff, :svg, :mpeg, :mp3, :ogg, :m4a, :webm, :mp4, :otf, :ttf, :woff, :woff2, :xml, :rss, :atom, :yaml, :multipart_form, :url_encoded_form, :json, :pdf, :zip, :gzip], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :coffee, :jbuilder]}. Searched in: * "/Users/SHIGE/mymeal3ajax/app/views" ): 1: $("#like-buttons").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like}) %>") app/views/likes/create.js.erb:1:in `_app_views_likes_create_js_erb__364044909247640962_70328458376380'

よろしくお願いします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2018/12/03 22:33

実際にご自身が実行されたコードをご提示ください。どの段階までできているかはそこでしか判断できません。エラーが出ていないかもご確認ください(うまくいってない だけだと状況わかりませんので)
tomtom1
tomtom1

2018/12/03 22:53

失礼しました。コードを加えましたので、お手数ですが目を通して頂ければ幸いです。
m.ts10806
m.ts10806

2018/12/04 00:07

あとはブラウザ開発ツールのコンソールにエラー出ているか確認してください。
tomtom1
tomtom1

2018/12/04 00:21

お時間割いていただき、ありがとうございます。コード追記しました。ご確認よろしくお願い申し上げます。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。