Reputation:
So I'm trying to update my comments section with AJAX without the full page refresh for a college project. However I can't seem to get this working. In the console it gives me s
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
My show.html.erb file:
<h1>Title: <%= @post.title %></h1>
<h2>Body: <%= @post.body %></h2>
<hr />
<h1>Your comments</h1>
<%= link_to "View comments", "#", id: "comments-link" %>
<ol id="comments">
<%= render 'comments' %>
<hr />
<h1>Create comment</h1>
<%= form_for(@comment, :html => {class: "form", role: "forms"}, :url => post_comments_path(@post), remote: true) do |comm| %>
<div class="container">
<div class="input-group input-group-md">
<%= comm.label :body %>
<%= comm.text_area :body, class: "form-control", placeholder: "Enter a comment" %>
</div>
<%= comm.submit "custom", id: "button" %>
</div>
<% end %>
</ol>
My comments.coffee:
$(document).on "page:change", ->
$('#comments-link').click ->
$('#comments').fadeToggle()
$('#comments_body').focus()
My create.js.erb:
$('#comments').append("<%= j render @comment %>");
and my Comments controller:
class CommentsController < ApplicationController
def index
end
def new
end
def new
@comment = Comment.new
end
def create
@comment = Comment.new(comment_params)
@comment.post_id = params[:post_id]
if @comment.save
flash[:success] = "Successfully created comment"
respond_to do |format|
format.html { redirect_to post_path(@comment.post_id) }
format.js
end
else
flash[:danger] = "Failed to create comment"
redirect_to root_path
end
end
private
def comment_params
params.require(:comment).permit(:body)
end
end
I may have missed some files so just let me know, it is basic as it's just a post and comment system - no styling needed for the project, so yeah. I have been trying this for the last 4 hours and other places just don't work. I've looked on here, Youtube - everywhere however no one else's code works for me so I have come here! Thank's for you're help.
EDIT:
I noticed it said to create a view in the error response, however I made that view and rendered the comment's body onto the create.html.erb however I just need to display the form now.
Upvotes: 0
Views: 1817
Reputation: 2986
I notice you are posting to the url post_comments_path(@post). For nested routes, it might be cleaner to do the following:
1) Post to the nested route directly:
<%= form_for([@post, @comment], html: {class: "form", role: "forms"}, remote: true) do |comm| %>
2) Make sure your routes are nested properly, in routes.rb:
resources :posts do
resources :comments
end
3) Refactor your CommentsController, to build through the @post instance:
class CommentsController < ApplicationController
before_action :get_post
def index
@comments = @post.comments
end
def new
@comment = @post.comments.build
end
def create
@comment = @post.comments.build(comment_params)
if @comment.save
flash[:success] = "Successfully created comment"
respond_to do |format|
format.html { redirect_to post_path(@post) }
format.js
end
else
respond_to do |format|
format.html { render :new }
format.js { render :error }
end
end
end
private
def comment_params
params.require(:comment).permit(:body)
end
def get_post
@post = Post.find(params[:post_id])
end
end
4) Render the validation errors in app/views/comments/error.js.erb. I'll let you decide how best to do that, but here's a quick dump to the console:
<% @comment.errors.full_messages.each do |message| %>
console.log("<%= message %>");
<% end %>
This file is not to be confused with your app/views/comments/create.js.erb which is handling successful save of the comment. That should look something like this:
$('#comments').append("<%= j render @comment %>");
$(".form")[0].reset();
5) Tweak your view a little bit. I notice you need to output the comments differently:
<ol id="comments">
<%= render @post.comments %>
</ol>
which should correspond to a partial in app/views/comments/_comment.html.erb so make sure this is there.
Upvotes: 2