senden bearbeitetem Kommentar an der gleichen Stelle mit Ajax, Jquery in Schienen

Question

Ich habe gerade viel versucht und nach Antworten suchen, aber nichts gefunden .... Ich habe Kommentare in einem Beitrag und Benutzer können ihre Kommentare bearbeiten .. wenn er klicken Die Bearbeitung im Kommentar, ein Formular wird anstelle des Kommentars angezeigt ... das alles funktioniert, aber wenn Sie die Updates senden, wird der Kommentar unter die Liste der Kommentare in demselben Post gehen, und das Bearbeitungsformular bleibt erhalten und wenn er es erneut einreicht, wird ein anderes (untergeordnetes) unter die Liste gehen ... wenn ich nun die Seite aktualisiere, wird der aktualisierte Kommentar an den richtigen Ort zurückgehen und das doppelte wird entfernt ... wie löst man das? ? Ich möchte das Formular mit dem aktualisierten commetns ersetzen, statt und ohne Refresh ...

hier meine Post Fußzeile ist, wo die Kommentare desiplayed sind:

<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> 

hier ist mein Kommentar Teil _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 you sure?" }, remote: true %></li> 
       </ul> 
      </li> 
      </ul> 
     <% end %> 
    </div> 
    </div> 
<% end %> 

hier ist meine Kommentarfunktion unter Pfosten (_comment2.html.erb):

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

hier ist mein edit.js.erb unter Kommentare:

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

hier ist mein update.js.erb unter Kommentare:

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

und hier wird der Kommentar-Controller, wo die Bearbeitung und Aktualisierung:

def edit 
    @comment = @post.comments.find(params[:id]) 
    respond_to do |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 do |format| 
     format.html {redirect_to root_path} 
     format.js 
     end 
    else 
     flash[:alert] = "Something worng, try again" 
     render root_path 
    end 
    end 
end 

Answer 1

Du bist der Kommentar in update.js.erb anhängt, So wird es unter den anderen Kommentaren angezeigt. Um es oben zu haben, versuchen zu voranzustellen:

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

Wenn auch Sie Ihren Kommentar-Formular nach dem Update ausblenden möchten, können Sie hinzufügen, dass auch update.js.erb. (Fügen Sie besser eine ID oder Klasse zum Formular hinzu, wenn Sie mehrere Formulare auf der Seite haben).

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

Answer 2

in update.js.erb ersetzen Sie das Formular mit dem Kommentar, so etwas wie dieses

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