如何在成功提交Ajax表单后获取注释类，然后显示它并进行页面外刷新？

Question

I want to get ".comment_container" for the post just made and place it after the last comment.

Each comment and it's related content is stored in a ".comment_container" class.

The code below does what I need but not 100%. Rather than append the word TEST I want to append the new comment_contaner holding the comment just posted.

I've been cracking at this all day and this is how far I've come. I would appreciate some solutions with examples if possible.

JQuery:

$('#new_comment').on('ajax:success', function(){
  $(this).parent('.post_content').find('.comment_container:last').after("TEST");
});

<% sleep 1 %>

HTML:

       <div class="postHolder">
        <nav class="micropostOptions">
         <ul class="postMenu">
           <li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %>
           </li>
           <li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
           <li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
           <li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
           <li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
         </ul>  
       </nav>


                <%= link_to image_tag(default_photo_for_current_user, :class => "poster_photo"), current_users_username %>







<div class="post_content">
    <div class="post_container">

                        <div class="userNameFontStyle"><%= link_to current_users_username.capitalize, current_users_username %> -
                        <div class="post_time"> <%= time_ago_in_words(m.created_at) %> ago.</div> </div>  
                  <%=  simple_format h(m.content) %> </div>

                        <% if m.comments.any? %>
                   <% comments(m.id).each do |comment| %>

                    <div class="comment_container">
                        <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>

                        <div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %> </div>
                    </div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>


                   </div>


                        <% end %>
                    <% end %>


                <% if logged_in? %>
                <%= form_for @comment, :remote => true, :html => {:class => "new_comment} do |f| %>
                <%= f.hidden_field :user_id, :value => current_user.id %>
                <%= f.hidden_field :micropost_id, :value => m.id %>
                <%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>

        <div class="commentButtons">         
          <%= f.submit 'Post it', :class => "commentButton" %>
           <div class="cancelButton"> Cancel </div>
        </div>   
                <% end %>

                <% end %>
    </div>


</div>

Comments controller:

class CommentsController < ApplicationController

    def create

         @comment = Micropost.find(params[:comment][:micropost_id]).comments.build(params[:comment])
           respond_to do |format|
                 if @comment.save


                    unless params[:comment][:recipient].blank? # this will be blank when current user is commenting/replying on their own wall
                    recipient = User.find(params[:comment][:recipient])
                    UserMailer.new_wall_post_comment_notification(recipient, current_user).deliver if recipient.email_notification == 1 
                    end
                    format.js   { render :post_comment }
                    else
                    format.js   { render :form_errors }
                    end
           end
    end

end

Comment partial:

<div class="comment_container">

        <%= link_to image_tag(default_photo_for_commenter(@comment), :class => "commenter_photo"), commenter(@comment.user_id).username %>
     <div class="commenter_content"> 

        <div class="userNameFontStyle"><%= link_to commenter(@comment.user_id).username.capitalize, commenter(@comment.user_id).username %> - <%=  simple_format h(@comment.content) %> 
        </div>

    </div>

    <div class="comment_post_time"> 
        <%= time_ago_in_words(@comment.created_at) %> ago. 
    </div>

</div>

Seems to be working apart from 1 minor issue. Let's say I post 4 comment... 1 after each other. First comment 1, second 2, third 3 and fourth 4.. eg 1, 2, 3 and 4 the result I get is this:

I have a feeling it's something to do with some kind of reset needing to be done after each comment is left. After refreshing the comments display as expected. 1, 2, 3 and 4. Any thoughts?

Kind regards.

Answer 1

You should make the partial for rendering your Comment s (I guess it should be the /views/comments/_comment.html.erb ).

Then just replace:

.after("TEST");

with:

.after("<%= j render @comment %>");

Answer 2

This along with the advice from jdoe fixed my issue

$('.new_comment').off().on('ajax:success', function(e){
 e.preventDefault();
    $(this).parent('.post_content').find('.comment_container:last').after("<%= j render 'comments/partials/comment' %>");
    $('#comment_content').removeClass("comment_box_focused").addClass("comment_box");
    $(".commentButtons").removeClass("displayButtons");
    $('#comment_content').val("");
    <% sleep 1 %>

});