创建后如何使用Ajax仅显示第一条评论

Question

At present my application is able to append comments to microposts that already have comments. Below is _micropost.html.erb (simplified):

<li id="micropost-<%= micropost.id %>">
  <span class="content">
    <%= micropost.content %>
  </span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
      ~ <%= link_to "Comment", "#", class: "comment-link", remote: true %>
    <% if micropost.comments.any? %>
      ~ <%= link_to "Show/hide comments", "#", class: "comments-link", remote: true %>
    <% end %>
  </span>
  <% if logged_in? && (current_user == micropost.user || current_user.friend?(micropost.user)) %>
    <div class="comment-section">
      <%= form_for(current_user.comments.build, remote: true) do |f| %>
        <%= f.hidden_field :micropost_id, value: micropost.id %>
        <%= f.text_area :content, rows: "1", class: "comment_area" %>
        <%= f.submit "Comment", class: "btn btn-primary btn-sm" %>
      <% end %>
    </div>
  <% end %>
  <div class="comments-section">
    <% if micropost.comments.any? %>
      <ol id="comments_micropost-<%= micropost.id %>">
        <% micropost.comments.each do |comment| %>
          <%= render comment %>
        <% end %>
      </ol>
    <% end %>
  </div>
</li>

create.js.erb is:

var comments = $('ol#comments_micropost-<%= @micropost.id %>');
comments.append('<%= escape_javascript(render partial: @comment) %>');

As it is conceived, create.js.erb implies that the comment created is added to other comments, that is that the comment created is not the first one. In this case, var comments is not null and the last line of code append the comment to the list of the other comments.
Also, in case micropost.comments is not nil, the user can use the "Show/hide comments" link to toggle the order list with id="comments_micropost-<%= micropost.id %>"

The problem with this configuration is that in case a user add to any micropost the first comment (that is the user writes his comment when micropost.comments == 0 ) there is no chance to see the result without refreshing the page.

So I am asking: how can I edit create.js.erb so that the user can see straight away the result of posting the first comment and that the "Show/hide comments" link be added to the page?

I tried the following code but it does not work:

if (comments !== null) {
    comments.append('<%= escape_javascript(render partial: @comment) %>');
} else {
        $('#micropost-<%= @micropost.id %>').find('.comments-section').append("<ol id='comments_micropost-<%= @micropost.id %>'><%= escape_javascript(render partial: @comment) %></ol>");
        $('#micropost-<%= @micropost.id %>').find('.timestamp').append(" ~ <%= link_to 'Show/hide comments', '#', class: 'comments-link', remote: true %>");
};

Answer 1

<li id="micropost-<%= micropost.id %>">
  <span class="content">
    <%= micropost.content %>
  </span>
  <span class="timestamp">
    Posted <%= time_ago_in_words(micropost.created_at) %> ago.
      ~ <%= link_to "Comment", "#", class: "comment-link", remote: true %>
    <% if micropost.comments.any? %>
      ~ <%= link_to "Show/hide comments", "#", class: "comments-link", remote: true %>
    <% end %>
  </span>
  <% if logged_in? && (current_user == micropost.user || current_user.friend?(micropost.user)) %>
    <div class="comment-section">
      <%= form_for(current_user.comments.build, remote: true) do |f| %>
        <%= f.hidden_field :micropost_id, value: micropost.id %>
        <%= f.text_area :content, rows: "1", class: "comment_area" %>
        <%= f.submit "Comment", class: "btn btn-primary btn-sm" %>
      <% end %>
    </div>
  <% end %>
  <div class="comments-section">
     <%= render partial: comments, micropost: micropost %>
  </div>
</li>    

And in _comments.html.erb

<% if micropost.comments.any? %>
   <ol id="comments_micropost-<%= micropost.id %>">
   <% micropost.comments.each do |comment| %>
      <%= render comment %>
   <% end %>
   </ol>
<% end %>

And in create.js.erb

var comments = $('ol#comments_micropost-<%= @micropost.id %>');
if (comments == undefined) {
  $('div#comments-section').html('<%= escape_javascript(render partial: comments, micropost: @micropost) %>');
} 
else {
  comments.append('<%= escape_javascript(render partial: @comment) %>');
};

Answer 2

I solved my issue creating as originally suggested by Minu a app/views/comments/_comments.html.erb file as follows:

<% if @micropost.comments.any? %>
  <ol id="comments_micropost-<%= @micropost.id %>">
    <% @micropost.comments.each do |comment| %>
      <%= render comment %>
    <% end %>
  </ol>
<% end %>

Without changing partial _micropost.html.erb I edited create.js.erb as follows:

var comments = $('ol#comments_micropost-<%= @micropost.id %>');

if (comments.length == 0) {
  $('#micropost-<%= @micropost.id %>').find('.comments-section').html("<%= escape_javascript(render partial: 'comments/comments') %>");
}
else {
  comments.append('<%= escape_javascript(render partial: @comment) %>');
};

When micropost.comments.any? is false, var comments is neither null or undefined , but is considered as an empty array, as can be verified by using a web browser console. Hence the use of if (comments.length == 0) . See post at Stackoverflow.