javascript - submit edited comment in same place with ajax, jquery in rails -

i tried lot , search answers found nothing.... have comments in post , user can edit comments.. if click edit in comment, form display in place of comment...all of working when submit updates comment go below list of comments in same post, , edit form stay , if submit again (dublicated) 1 go below of list...now if refresh page updated comment right place , dublicated 1 removed... how solve that? want replace form updated commetns instead , without refresh...

here post footer comments desiplayed:

<div class="panel-footer" id="panel_footer_<%= post.id %>">   <div class="comment-form" id="comment-form-j">     <%= render 'comment2', post: post, comment: post.comments.build %>   </div>   <div class="comments" id= "comments_<%= post.id %>">     <% if post.comments.present? %>       <%= render post.comments, post: post %>     <% end %>   </div> </div> 

here comment partial _comment.html.erb :

<% if  comment.user_id.present? %>   <div id="current_comment_<%= comment.id %>" >     <div id="comment">         <div id="avatar_comment_<%= comment.user_id %>">             <%= link_to image_tag(comment.user.avatar.url, size: "30x30", class: "img-circle img-comments"), profile_path(comment.user.user_name) %>         </div>         <div class="user-name">             <%= link_to comment.user.user_name, profile_path(comment.user.user_name), class: "username-size" %>         </div>         <div class="comment-content comment-with-menu menu-comment-line" id = "this_comment_<%= comment.id %>" >           <%= comment.content %>         </div>         <% if comment.user == current_user %>           <ul class="comment-menuu menu-comment-line">             <li class="dropdown">               <a href="#" class="dropdown-toggle menu-right-comment  " data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span></a>               <ul class="dropdown-menu">                 <li><%= link_to "edit", edit_post_comment_path(post, comment), remote: true %></li>                 <li role="separator" class="divider"></li>                 <li><%= link_to "delete", post_comment_path(post, comment), method: :delete, data: { confirm: "are sure?" }, remote: true %></li>               </ul>             </li>           </ul>          <% end %>     </div>   </div> <% end %> 

here comment form under posts(_comment2.html.erb):

<%= form_for([post, comment], remote: true) |f| %>   <%= f.text_field :content, placeholder: 'add comment...', class: "form-control comment_content", id: "comment_content_#{post.id}"  %> <% end %> 

here edit.js.erb under comments:

$("#this_comment_<%= @comment.id %>").replacewith("<%= j render 'posts/comment2', post: @post, comment: @comment %>"); 

here update.js.erb under comments:

$('#comments_<%= @post.id %>').append("<%=j render 'comments/comment', post: @post, comment: @comment, remote: true %>"); 

and here comment controller edit , update:

def edit   @comment = @post.comments.find(params[:id])   respond_to |format|     format.js    end end  def update   @comment = @post.comments.find(params[:id])       if @comment.user_id == current_user.id      if @comment.update(comments_params)        respond_to |format|          format.html {redirect_to root_path}          format.js          end      else        flash[:alert] = "something worng, try again"        render root_path      end   end end 

you appending comment in update.js.erb, show underneath other comments. have above, try prepend:

$('#comments_<%= @post.id %>').prepend("<%=j render 'comments/comment', post: @post, comment: @comment, remote: true %>"); 

if want hide comment-form after update, can add update.js.erb well. (maybe better add id or class form if have multiple forms on page).

$('#my-comment-form-id').hide(); // or .remove();