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

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

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

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

Ajax

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

Q&A

0回答

1294閲覧

Rails の ajax通信のエラーについて

nosa

総合スコア1

Ruby on Rails

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

Ajax

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

0グッド

0クリップ

投稿2020/05/17 13:27

前提・実現したいこと

現在、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に記載する際のアソシエーションが上手くいっていないところまで詰めれましたが、
この先がどう直せば(記載すれば)正常にアソシエーション先の情報を持ってこれるかわかりませんでした。
記載が足りない等お気づきの点等がございましたら、ご教示いただけると幸いです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問