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

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

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

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

JavaScript

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

Ajax

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

受付中

いいね機能の非同期通信を教えていただきたいです

yu-def39
yu-def39

総合スコア0

Ruby

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

JavaScript

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

Ajax

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

1回答

0評価

1クリップ

146閲覧

投稿2022/06/20 06:43

Ruby on Railsで非同期通信のいいね機能の実装に取り組んでいますが
エラーが出て非同期でいいねができない状態です。
現在は同期通信ではいいねはできます。

解決方法を教えて下さい。

発生している問題・エラー

ActionView::Template::Error (undefined method `id' for nil:NilClass):
$("#like_heart_<%= @post.id %>").html("<%= j(render 'likes/like', locals: {post: @post}) %>");

app/views/likes/create.js.erb:1

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。
<%= @post.id %>ここが間違っているかと仮定して変更したりしましたが
実装にまでたどりつきません。
お時間ある方お願いします。

likes_controller.rb

class LikesController < ApplicationController def create post = Post.find(params[:post_id]) @like = Like.create(user_id: current_user.id, post_id: post.id) end def destroy post = Post.find(params[:post_id]) @like = Like.find_by(user_id: current_user.id, post_id: post.id) @like.destroy end end

show.html.erb

<main class="main"> <div class= "null"> </div> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=<%=ENV['GOOGLE_MAP_KEY']%>&callback=initMap&v=weekly" async ></script> <script> let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: <%= @post.latitude %>, lng: <%= @post.longitude %>}, zoom: 15, }); var marker = new google.maps.Marker({ position: { lat: <%= @post.latitude %>, lng: <%= @post.longitude %>}, map: map, title: "<%= @post.address %>" }); } </script> <div class="inner"> <div class="post__wrapper"> <div class="post_show_image"> <%= image_tag @post.image.variant(resize: '500x500'), class: "post_show_image" %> </div> <div class="post__body"> <div class="post_address"> <%= @post.address %> <div id="like_heart_<%= @post.likes %>"> <%= render partial: "likes/like", locals: { post: @post, likes: @likes } %> </div> </div> <div class="post_spring_quality"> <div class="detail__message"> 泉質: <%= @post.spring_quality %> </div> </div> <div class="post_description"> <div class="detail_description"> <%= @post.description %> </div> </div> <div class="post_bottom"> <div class="post_name"> 投稿者: <%= link_to @post.user.name, user_path(@post.user), class: :post__user %> </div> <div class="post_comment"> "コメント" </div> </div> <% if user_signed_in? %> <%= form_with model: [@post, @comment], local: true do |f|%> <div class="input"> <%= f.text_field :content, id:"comment_content" %> </div> <div class="actions-comment"> <%= f.submit "送信する", class: :comment__btn %> </div> <% end %> <% end %> <div class="comments_lists"> <% @comments.each do |comment| %> <div class="comments_list"> <%= link_to "#{comment.user.name}:", user_path(comment.user), class: :comment_user %> <%= comment.content%> </div> <% if user_signed_in? && current_user.id == comment.user_id %> <%= link_to "削除", post_comment_path(comment.post.id, comment.id), method: :delete,class: :comment_delete %> <% end %> <% end %> </div> <% if user_signed_in? && current_user.id == @post.user_id %> <div class="post__manage"> <%= link_to "編集する", edit_post_path(@post.id), method: :get,class: :post__btn %> <%= link_to "削除する", post_path(@post.id), method: :delete,class: :post__btn %> </div> <% end %> </div> </div> </main>

_like.html.erb

<div class="like-hearts"> <%if user_signed_in? %> <% if Like.find_by(user_id: current_user.id, post_id: @post.id) %> <%= link_to post_like_path(@post,@post.likes), class: "like-link", method: :delete, remote: true do %> <i class="fas fa-heart unlike-btn"></i> <% end %> <div class="count"><%= @post.likes.count %></div> <% else %> <%= link_to post_likes_path(@post,@post.likes), class: "like-link", method: :post, remote: true do %> <i class="far fa-heart like-btn"></i> <% end %> <div class="count"><%= @post.likes.count %></div> <% end %> <% else %> <i class="fas fa-grin-squint-tears unlike-btn"></i><p class="count"><%= post.likes.count %></p> <% end %> </div>

create.js.erb

$("#like_heart_<%= @post.id %>").html("<%= j(render 'likes/like', locals: {post: @post}) %>");

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Ruby

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

JavaScript

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

Ajax

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