前提・実現したいこと
現在、railsでSNSサイトを作成しております。
投稿機能にajaxを使用したいと考えておりますが、jbuilderにエラーが発生し、javascriptに情報を渡せない状態となっております。
(実現したいこと)
posts/indexで入力した投稿をposts/indexに表示したい。
なお、投稿を表示する際は、ユーザー情報、フォロワー数、いいねの数、お気に入り数、コメント数も一緒に表示したい。
エラーメッセージ
jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:10255 POST http://localhost:3000/posts 500 (Internal Server Error)
エラーの内容を追うと、jbuilderでエラーが発生します。
posts/create.json.jbuilder
json.id @post.id json.user.profile.image @post.user.profile.image json.user.nickname @post.user.nickname json.grade @post.grade json.subject @post.subject json.title @post.title json.user.followers.length @post.user.followers.length json.likes.length @post.likes.length json.favorites.length @post.favorites.length json.comments.length @post.comments.length json.created_at @post.created_at.strftime("%Y-%m-%d %H:%M")
検証してみましたが、2行目の「profile」nilエラーとなっているようです。
エラー箇所をコメントアウトし、検証を進めると、
3行目「nickname」
7行目「followers」
8行目「likes」
9行目「favorites」
10行目「comments」
がエラー同様のエラーとなり、アソシエーションの部分でエラーが発生していることが確認できます。
ちなみに、ajaxを使用しない状態だと、アソシエーションの部分は正常に数値を引っ張ってきますので、
アソシエーションそのものに誤りは無いと仮定しています。
post.js
$(function(){ function buildHTM(post){ var html = `<div class="post__card"> <a href="/users/${post.user_id}" class="post__card__picture__link"> <div class="picture"> <img src=${post.user.profile.image} class= "post__user__image"> </div> </a> <a href="/posts/${post.id}" class="post__card__contents"> <div class="post__contents"> <div class="post__contents__name element"> ${post.user.nickname} </div> <div class="post__card__content__grade element"> ${post.grade} </div> <div class="post__card__content__subject element"> ${post.subject} </div> </div> <div class="post__title"> ${post.title} </div> <div class="post__under"> <div class="post__status"> <div class="follow icon">フォロワー</div> <div class="follow count"> ${post.user.followers.length} </div> <div class="like icon"> <i class="fas fa-heart"></i> </div> <div class="like count"> ${post.likes.length} </div> <div class="favorite icon"> <i class="fas fa-star"></i> </div> <div class="favorite count"> ${post.favorites.length} </div> <div class="comment icon"> <i class="fas fa-comment"></i> </div> <div class="comment count"> ${post.comments.length} </div> </div> <div class="post__created"> ${post.created_at} </div> </div> </a> </div>` return html; } $('#new_post').on('submit', function(e){ e.preventDefault(); var formData = new FormData(this); var url = $(this).attr('action'); $.ajax({ url: url, type: "POST", data: formData, dataType: 'json', processData: false, contentType: false }) .done(function(data){ var html = buildHTML(data); $('.content__ajax').append(html); $('.empty__val').val(""); $('.send_btn').prop('disabled', false); }) .fail(function(){ alert("投稿に失敗しました") $(".send_btn").prop('disabled', false); }) }) });
posts.controller.rb(関係箇所抜粋)
def index #投稿フォームに渡すインスタンス @post = Post.new #トップ画面の投稿を表示 @posts = Post.includes(:user).order(created_at: "DESC") end def create @post = Post.create(post_params) respond_to do |format| format.json end end
views/posts/index.html.naml(関係箇所抜粋)
- @posts.each do |post| .post__card =link_to user_path(post.user_id), class:"post__card__picture__link" do .picture = image_tag post.user.profile.image, class: "post__user__image" =link_to post_path(post.id), class:"post__card__contents" do .post__contents .post__contents__name.element = post.user.nickname .post__card__content__grade.element = post.grade .post__card__content__subject.element = post.subject .post__title = post.title .post__under .post__status .follow.icon フォロワー .follow.count = post.user.followers.length .like.icon = icon("fas", "heart") .like.count = post.likes.length .favorite.icon = icon("fas", "star") .favorite.count = post.favorites.length .comment.icon = icon("fas", "comment") .comment.count = post.comments.length .post__created = post.created_at.strftime("%Y-%m-%d %H:%M")
もちろん、ajaxを使用しなければ正しく表示されます。
また、ajax(エラーエラー状態)でもリロードすれば正しく更新されますので、
controllerにも異常が無いことを確認できております。
仮説まとめ
上記のことから、アソシエーション及びコントローラーは正常な動作を確認できました。
jbuilderに記載する際のアソシエーションが上手くいっていないところまで詰めれましたが、
この先がどう直せば(記載すれば)正常にアソシエーション先の情報を持ってこれるかわかりませんでした。
記載が足りない等お気づきの点等がございましたら、ご教示いただけると幸いです。
あなたの回答
tips
プレビュー