I am try to render my comments with ajax in my rails app...but it is not working and the comments diplay just after I redirect the page...so the comment get created successfully but the problem is rendering comments with ajax and jquery!!!! I have this lines in my application.html.erb:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
and this require line in my application.js:
//= require jquery
//= require jquery_ujs
here is my show.html.erb file under posts :
<div id="posts" class="transitions-enabled">
<div class="box panel panel-default">
<%= render 'post', post: @post %>
</div>
</div>
my _post partial:
<div class="panel-body">
<%= link_to image_tag(post.user.avatar.url, size: "50x50", class: "img-circle"), profile_path(post.user.user_name) %>
<ul class="posts-shows">
<li><strong><%= link_to post.user.user_name, profile_path(post.user.user_name) %></strong></li>
<li><small><%= link_to "#{time_ago_in_words(post.created_at)} ago", post_path(post), class: "time-link" %></small></li>
</ul>
<p class="disc-posts"><%= post.description %></p>
<%= link_to image_tag(post.image.url(:large), class: "img-responsive img-in" ) %><br/>
<% if post.user == current_user %>
<div><%= link_to "Edit", edit_post_path(post) %> | <%= link_to "delete", post, method: :delete, data: {confirm: "Are you sure?"} %> </div>
<% else %>
<div><%= link_to "Repost", repost_post_path(post), method: :post, data: { confirm: "Are you sure?"} if user_signed_in? %></div>
<% end %>
</div>
<div class="panel-footer">
<div class="comment-form">
<%= form_for([post, post.comments.build], remote: true) do |f| %>
<%= f.text_field :content, placeholder: 'Add a comment...', class: "form-control comment_content", id: "comment_content_#{post.id}" %>
<% end %>
</div>
<div class="comments" id= "comments_#{post.id}">
<% if post.comments.present? %>
<%= render post.comments, post: post %>
<% end %>
</div>
</div>
my _comment.html.erb in comments folder:
<% if comment.user_id.present? %>
<div id="comment">
<%= link_to image_tag(post.user.avatar.url, size: "30x30", class: "img-circle img-comments"), profile_path(comment.user.user_name) %>
<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.content %>
</div>
</div>
<% end %>
and here is the create.js.erb under comments folder :
$('#comments_<%= @post.id %>').append("<%=j render 'comments/comment', post: @post, comment: @comment %>");
$('#comment_content_<%= @post.id %>').val('')
and my comments controller:
class CommentsController < ApplicationController
before_action :set_post
def index
@comments = @post.comment.all
end
def new
@comment = @post.comments.build(comments_params)
end
def create
@comment = @post.comments.build(comments_params)
@comment.user_id = current_user.id
if @comment.save
respond_to do |format|
format.html { redirect_to root_path }
format.js
end
else
flash[:alert] = "Check the comment form, something went horribly wrong."
render root_path
end
end
def destroy
@comment = @post.comments.find(params[:id])
@comment.destroy
flash[:success] = "Comment deleted :("
redirect_to root_path
end
private
def comments_params
params.require(:comment).permit(:content)
end
def set_post
@post = Post.find(params[:post_id])
end
end
