Editing comments on show.html.erb rather than redirecting to new edit.html.erb page with Ruby on Rails

Question

Like the title says, I am created the blog application from the Rails guide and I want to be able to edit comments made on articles without redirecting to an edit.html.erb page. I want a div that was previously hidden to appear in the middle of the screen with the edit form on it and the text fields filled with the comment that is being edited. Here is an image of the div that is going to appear in the middle of the screen.

I know how to edit comments by going to edit.html.erb but not in the same page or if this is even possible.

I am not looking for help with the css or html, but if there is a way to do this with js or rails that would be awesome. Thanks in advance!

Edit: So the answer by Satendra gets the partial to show up, but the fields do not contain the original comment that I wanted to edit. How can I get the text-fields to be populated with the comment?

Answer 1

Follow these steps to make edit comment on same page.

1. Create a partial name _edit.html.erb put your edit.html.erb code there.

2. Create a div in middle of the screen where you want to render this partial.

    <div id="edit_comment" > </div> 

3. put :remote => true to your edit button link.

    # change your path accordingly <%= link_to edit_comment_path(:comment_id => comment.id), :remote => true %> 

   The :remote => true is the most important part here, it allows the whole Ajax business in the first place.

4. In comment_controller.rb inside edit function change respond_to js

    def edit @comment = Comment.find(params[:id]) respond_to do |format| format.js end end 

5. Create edit.js.erb and put below code there.

    $("#edit_comment").html("<%= j render(:partial => 'edit', :locals =>{ :comment => @comment }) %>"); # use comment variable in your partial as it is passed as local. 

Its Done.