How to use ajax on rails 4?

Question

I am trying to create a comment area in rails 4 using ajax. My target is to create comment and its output in same page without page loading. I have added some code. When i click on "add comment" button the data entered to DB, but does not reflect in same page.Please share with me if any one have any idea, thank u.

My codes are below:

In comment controller:

def create
    @article = Article.find(params[:article_id])
    @comment = @article.comments.create
    @comment.body = params[:comment]["body"]

    respond_to do |format|
        @comment.save
        format.html { redirect_to @article }
        format.js
    end
end

In show.html.erb under views/articles

<div class="col-xs-12 col-sm-12">
  <h2 class="text-center"><%= @article.title.html_safe %></h2>
    <p><%= @article.body.html_safe %></p>
      <h2>Comments</h2>
        <div id="comments">
             <!--  <p><%= render :partial => @article.comments %></p> -->
             <%= render :partial => 'comments/comment', :collection => @article.comments %>
        </div>
        <%= form_for([@article, Comment.new], :remote => true) do |f| %>
              <p>
                <%= f.label :body, "New comment" %><br/>
                <%= f.text_area :body, type:"text", tabindex: "6", class: "form-control",  placeholder: 'your comment', rows: "4", required: true  %>
              </p>
              <p><%= f.submit "Add comment" %></p>
        <% end %>
</div>

_comment.html.erb under view/comments

<%= div_for comment do %>
    <p>
        <b>
           Posted <%= time_ago_in_words(comment.created_at) %> ago
        </b>
        <br/>
        <%= comment.body %>
           <%= link_to 'Delete', article_comment_path(comment.article_id, comment.id), method: :Delete, :class => 'btn btn-sm btn-warning', tabindex: "3" %>
           <%= link_to 'Edit', article_path(comment.article_id, comment.id), :class => 'btn btn-sm btn-warning', tabindex: "3" %>                         
    </p>
<% end %>    

create.js.erb under views/comments

page.insert_html :bottom, :comments, :partial => 'comment', :object => @comment
page[:new_comment].reset

config/application.rb

config.action_view.JavaScript_expansions[:defaults] = %w(jquery rails application)

Answer 1

Added something like:

create.js.erb under views/comments

$("#comments").append("<%= escape_javascript(render(:partial => @comment)) %>");
$("#new_comment")[0].reset();

And It works for me.

Answer 2

the proper way to handle this case in rails is using a remote form, this way you can interactively insert and remove objects from db. Here are two explained blog posts about remote forms in rails detailed guide about remote forms and how to partials ajax rails. This way you can submit the form without refresh an then have an handler to generate the created element after the callback from the controller. Hope this fits your question.