Rails / Ajax - update action for comments partial not working

Question

I'm building an events app using Rails 5.0 and have comments as a nested resource. Users can create and destroy comments, I'm trying to implement the edit/update function using Ajax/ remote: true so they can update a comment on the same page but it's not working. When I click on the edit link nothing happens. Here's the relevant code -

comments_controller.rb

 class CommentsController < ApplicationController


before_action :set_comment, only: [:show, :edit, :update, :destroy]


def create
    @event = Event.find(params[:event_id])
    @comment = @event.comments.create(comment_params)
    @comment.user_id = current_user.id

    if @comment.save
        redirect_to @event
    else
        render 'new'
    end
end


# GET /comments/1/edit
def edit
    @event = @comment.event
    @comment = @event.comments.find(params[:id])

     respond_to do |format|
        format.html { render :edit }
        format.js {}
    end

end

def show
end



def update 
    if @comment.update(comment_params)
        redirect_to @event, notice: "Comment was successfully updated!"
    else
        render 'edit'
    end

    respond_to do |f|
        format.html { redirect_to @event, notice: "Comment Successfully updated!" }
        format.js # render 'comments/update.js.erb'
    end

end



def destroy
    @event = Event.find(params[:event_id])
    @comment = @event.comments.find(params[:id])
    @comment.destroy

    redirect_to event_path(@event)


end

private

def set_comment
  @comment = Comment.find(params[:id])
end

def comment_params
  params.require(:comment).permit(:name, :body)
end

end

_comment.html.erb

<div class="comment clearfix">
  <div class="comment_content">
    <div id="comments" class="comment">  
      <p id="comment_name"><strong><%= @comment.name %></strong></p>
      <p id="comment_body"><%= @comment.body %></p>

  </div>

      <p><%= link_to 'Edit', edit_event_comment_path(comment.event), id: "comments", remote: true %></p>

                  <p><%= link_to 'Delete', comment.event,
                                     method: :delete,
                                        class: "button",
                              data: { confirm: 'Are you sure?' } %></p>
    </div>
</div>

update.js.erb

$('#comments').append("<%= j render @comment %>");

edit.js.erb

$('#comments').html("<%= j render 'form' %>");

_form.html.erb

<%= simple_form_for([@event, @comment], remote: true) do |f| %>


    <%= f.label :comment %><br>
    <%= f.text_area :body %><br>
    <br>
    <%= f.button :submit, label: 'Add Comment', class: "btn btn-primary" %>
<% end %>

I've never implemented this action before using Ajax so I'm probably making a few schoolboy errors here. Any assistance appreciated.

Answer 1

You are calling edit method on controller with this

<%= link_to 'Edit', [comment.event, comment], id: "comment", remote: true %>

And you have no edit.js.erb

For updating your comment, you would have to create a form with it's action url pointing to your update method, and marking it as remote true. Then when you submit, it will reach update directly, there is no need to pass through edit method.

There is a method for creating forms with ajax option as default called form_with, you can check it's guide and documentation here:

http://guides.rubyonrails.org/working_with_javascript_in_rails.html#form-with

Updating answer after your question update

Your form would need to become something like this

<%= simple_form_for :comment, :url => "/events/#{comment.event_id}/comments/#{comment.id}", :method => :put do |f| %>

    <%= f.label :comment %><br>
    <%= f.text_area :body %><br>
    <br>
    <%= f.button :submit, label: 'Add Comment', class: "btn btn-primary" %>
<% end %>