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

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

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

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

Q&A

解決済

2回答

238閲覧

コレクションをレンダリング

KeikoYoshida

総合スコア11

Ruby on Rails 5

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

0グッド

0クリップ

投稿2018/07/20 06:06

編集2018/07/28 13:55

前提・実現したいこと

Ruby on Rails初心者で、アプリケーションを作っています。
ビューでコレクションをレンダリングして表示させようとしているのですが、うまく動作しません。

発生している問題・エラーメッセージ

保存されているデータ数より1回分多くレンダリングされます。

該当のソースコード

show.html.haml

Ruby

1 = render @comments

_comment.html.haml

html

1%h3.name.font-weight-bold.mt-4 2 = comment.name 3 = link_to "Delete", [comment.post, comment], method: :delete, data: { confirm: "Are you sure?" }, class: " text-secondary small" 4%p.body.mt-2= comment.body

保存されているcomment数より1回分多くレンダリングされるため、最後に”Delete”のみが一つ表示されてしまいます。

モデル、コントローラーも追記します。
新規コメントは非同期通信で行っていますが、こちらは問題なく動作します。
ページロードまたはリロード時に上記問題が発生します。

comment.rb

class Comment < ApplicationRecord validates :name, presence: true validates :body, presence: true belongs_to :post end

posts#show viewにコメントを表示させています。
posts_controller.rb

class PostsController < ApplicationController before_action :set_post, only: [:show, :edit, :update, :destroy] def index @posts = Post.all.order("created_at DESC") end def new @post = Post.new end def create @post = Post.new(post_params) if @post.save redirect_to post_path(@post) else render :new end end def show @comment = @post.comments.new @comments = @post.comments end def edit end def update if @post.update(post_params) redirect_to post_path(@post) else render :edit end end def destroy @post.destroy redirect_to root_path end private def set_post @post = Post.find(params[:id]) end def post_params params.require(:post).permit(:title, :body) end end

不要かもしれませんが、comment.js

$(document).on("ajax:success", "#new-comment", function(e) { // create new comment html var html = buildHTML(e.detail[0]); $('.comments').append(html); $('.commentform_name').val(''); $('.commentform_body').val(''); // scroll to the page bottom $('html, body').animate({ scrollTop: $(document).height() },1500); alert("send your comment") console.log(e.detail[0]); }); $(document).on("ajax:error", "#new-comment", function(e) { console.log(e.detail[2]); }); function buildHTML(data){ var html = '<h3 class ="font-weight-bold mt-4">' + data.comment.name + '<a class ="text-secondary small ml-2" data-method="delete" href="/posts/' + data.post_id + '/comments/' + data.comment.id + '">Delete</a>' + '</h3>\n' + '<div class ="mt-2">' + data.comment.body + '</div>\n'; return html; }

試したこと

comment_counter で確認すると、0〜データ数までレンダリングされていることが分かりました。原因は何でしょうか?

補足情報(FW/ツールのバージョンなど)

Rails 5.2.0

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

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

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

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

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

guest

回答2

0

自己解決

posts_controllerのshowアクションに問題がありました。

def show @comment = @post.comments.new @comments = @post.comments end

@commentsに@commentも含まれてしまっていたようで、それも一緒にレンダリングされていたようです。
下記の通り変更し、うまく動作しました。

def show @comment = @post.comments.new @comments = @post.comments.all end

投稿2018/07/28 14:00

KeikoYoshida

総合スコア11

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

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

0

controller と model を見てみないと何とも言えないんですが、 comment.name が空のものがあって、それが表示されないので1回分多くレンダリングされているのでは?という気がします。

rails console から、 Comment.where(name: nil) とかすると出てきませんかね?

投稿2018/07/22 15:15

ikepon

総合スコア57

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

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

KeikoYoshida

2018/07/23 01:37

お忙しいところ、ご回答ありがとうございます。 Comment modelには name, bodyに空でないことのvalidationを設定していました。またDB内データも確認しましたが、name, bodyどちらも空のデータは存在していませんでした。controller, modelも質問内容に追記しました。
ikepon

2018/07/23 04:38

なるほどです。 `comment.js` が悪さをしているかもしれないですね。 `comment.js` のコードを一旦すべてコメントアウトしてからアクセスすると空のものが消えたりしませんか?
KeikoYoshida

2018/07/28 13:50

ご回答いただいたにも関わらず、お返事が遅くなりすみません。 自己解決致しました(たぶん。。。)お忙しいなかお返事くださり、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問