How to use ajax on rails 4?

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>

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)


Source: ruby

Leave a Reply