0

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.

Improve this question
6
  • check console for error..and please post your error here. With 500 it must be giving some more error logs.. Commented Dec 2, 2015 at 15:29
  • I literally just updated that :) Commented Dec 2, 2015 at 15:30
  • in this for remote you should create create.js.erb instead create.html.erb Commented Dec 2, 2015 at 15:33
  • railscasts.com/episodes/136-jquery Commented Dec 2, 2015 at 15:34
  • I have a create.js.erb but it wanted me to make a create.html.erb as well Commented Dec 2, 2015 at 15:37

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

I have done all of this and none of it seemed to work
What is the 500 error you are getting, specifically.... Can you look at the output log of your rails server and see the exact error? i.e, not the error message in the Javascript console.
'Missing template comments/create, application/create with {:locale=> [:en], :formats=>[:js, :html], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :jbuilder]}. Searched in: * "/home/adam/Desktop/ruby/rails/AJAXC/app/views" <div id="console" data-remote- path='console/repl_sessions/5e7696b1ed6d46709ba46d6d013d6240' data-initial-prompt='>> '>' </div> This is the error I am getting
It is - this ones asking for the create.html.erb for some reason. It shouldn't need a template right? It's looking for the action - but on top off this if I refresh the page it still displays the comment it said it can't make.
Your remote: true should mean the form submits with the js format, and the respond_to block should handle that accordingly. Provided you have //= require jquery_ujs in your application.js manifest
|