Different Output Based on Order of my Code (Rails)

Question

I'm doing the rails tutorial and I've just associated a Comment model with my Article model.

I have a view file that displays a single article and all it's comments here (app/views/articles/show.html.erb):

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>

<p>
  <strong>Text:</strong>
  <%= @article.body %>
</p>

<h2>Comments</h2>
<% @article.comments.each do |comment| %>
    <p>
        <strong>Commenter:</strong>
        <%= comment.commenter %>
    </p>

    <p>
        <strong>Body:</strong>
        <%= comment.body %>
    </p>
<% end %>

<h2>Add a comment:</h2>
<%= form_for([@article, @article.comments.build]) do |comment| %>
    <p>
        <%= comment.label :commenter %>
        <%= comment.text_field :commenter %>
    </p>
    <p>
        <%= comment.label :body %>
        <%= comment.text_area :body %>
    </p>
    <p>
        <%= comment.submit %>
    </p>
<% end %>

With the code arranged like this--the comments displayed above the add comment form--everything appears fine in the browser

However, when I rearrange to have the comment form above the comments section, like this:

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>

<p>
  <strong>Text:</strong>
  <%= @article.body %>
</p>



<h2>Add a comment:</h2>
<%= form_for([@article, @article.comments.build]) do |comment| %>
    <p>
        <%= comment.label :commenter %>
        <%= comment.text_field :commenter %>
    </p>
    <p>
        <%= comment.label :body %>
        <%= comment.text_area :body %>
    </p>
    <p>
        <%= comment.submit %>
    </p>
<% end %>

<h2>Comments</h2>
<% @article.comments.each do |comment| %>
    <p>
        <strong>Commenter:</strong>
        <%= comment.commenter %>
    </p>

    <p>
        <strong>Body:</strong>
        <%= comment.body %>
    </p>
<% end %>

I'm left with an html element at the bottom of the page that is labeled commenter and body, but has nothing in them. For example, if I've commented once on the article, it'll show that intended comment, but also an additional blank comment below it. With the initial code arrangement, there is no additional blank comment, only the single intended comment I wrote on the article.

Why does rearranging the text like this add a blank comment at the bottom?

My articles controller show action:

def show
    @article = Article.find(params[:id])
end

My comments controller create action:

def create 
    @article = Article.find(params[:article_id])    
    @comment = @article.comments.create(comment_params)

    redirect_to article_path(@article)
end

Athar Athar · Accepted Answer · 2015-07-31T18:05:24

What is happening is once you do this(which you are doing in the form)

@article.comments.build

it initialize comment against that @article and then when you try to fetch the comments for the article below in the table, that assosiated comment also gets displayed. what you do is, update the table below with this

<% @article.comments.select(&:persisted?).each do |comment| %>
    <p>
        <strong>Commenter:</strong>
        <%= comment.commenter %>
    </p>

    <p>
        <strong>Body:</strong>
        <%= comment.body %>
    </p>
<% end %>

major line change is this

<% @article.comments.select(&:persisted?).each do |comment| %>

this will pick only those comments which exists in the database for that article

Different Output Based on Order of my Code (Rails)

1 Answers