user5198598
user5198598

Reputation:

Ruby on rails AJAX submit form error

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

Answers (1)

rlarcombe
rlarcombe

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

Related Questions