Rails Ajax Hide/Show Toggle Link using RJS

Question

Hello,

I want users to be able to comment on submissions. Below each submission I want there to be a link that says "Comments (2)"...when you click on this link it dynamically loads in the comments, as well as a simple form to add a new comment. When the user submits a new comment I want it to load asynchronously in at the bottom of the list.

How I have it working now is as follows:

// index.html.erb

<p class="comments_view_toggle">
  <%= link_to_remote("▼ view comments (#{answer.comments.count})", :controller => "comments", :action => "show", :submission => submission, :update => "comment")  %>
</p>

// comments_controller.rb

  def show
    @submission = Submission.find(params[:submission])
    respond_to do |format|
        format.html { redirect_to root_url }
        format.js
    end
  end

// show.rjs

page.insert_html :bottom, :comment, :partial => 'show', :locals => { :submission => @submission }

// _show.html.erb

    <ul id="comment_list">
        <%= render :partial => 'comments/comment', :collection => submission.comments  %>
    </ul>

    <div class="clear"></div>

        <% form_remote_for Comment.new do |f| %>
            <%= hidden_field_tag(:submission_id, answer.id)%>
            <%= hidden_field_tag(:user_id, current_user.id)%>
            <%= f.text_area :message %>
            <%= f.submit "comment", :disable_with => 'commenting...' %>
        <% end %>

I haven't even worked on the second part of the toggle function yet (hide) because whenever I click the link it reloads the entire page underneath the link, rather than just running the partial and I have no idea why. It appears to not be passing the params properly. Am I going about this all wrong? Can you point me in the right direction?

Answer 1

Hi Ryan,

You can do this by using prototype ajax library, which comes with rails by default. Or else you may want to do it with JQuery,

Here's one way of doing this

say you have the following html page

<div id="submission">
  // your submission details goes here
</div>
//here you will have your link says "comments"
<div id="comments">

</div>

Once you click the "comments" link, you can use link_to_remote to load all the comments inside the comments div

Ex: link_to_remote "View Comments", :update => "comments", :url => { :action => "comments", :id => submission.id }

so your controller will look like

class SubmissionsController < ApplicationController
    #your other code goes here

   def list
     #code to generate the comments list
     render :partial => 'comments_list', :object => @comments
   end
end

and you can have a partial for list comments "_comments_list"