Search code examples
ruby-on-railsrubyajaxprototypejsrjs

Confused as to which Prototype helper to use


After reading http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper.html I just can't seem to find what I'm looking for. I have a simplistic model that deletes the oldest message after the list of messages reaches 24, the model is this simple:

class Message < ActiveRecord::Base
  after_create :destroy_old_messages
  protected
  def destroy_old_messages
    messages = Message.all(:order => 'updated_at DESC')
    messages[24..-1].each {|p| p.destroy } if messages.size >= 24
  end
end

There is a message form below the list of messages which is used to add new messages. I'm using Prototype/RJS to add new messages to the top of the list. create.rjs:

page.insert_html :top, :messages, :partial => @message
page[@message].visual_effect :grow
#page[dom_id(@messages)].replace :partial => @message
page[:message_form].reset

My index.html.erb is very simple:

<div id="messages">
  <%= render :partial => @messages %>
</div>
<%= render :partial => "message_form" %>

When new messages are added they appear just fine, but when the 24 message limit has been reached it just keeps adding messages and doesn't remove the old ones. Ideally I'd like them to fade out as the new ones are added, but they can just disappear. The commented line in create.rjs actually works, it removes the expired message but I lose the visual effect when adding a new message. Does anyone have a suggestion on how to accomplish adding and removing messages from this simple list with effects for both? Help would be greatly appreciated. Thanks for reading. P.S.: would periodically_call_remote be helpful in this situation?


Solution

  • I'm going to assume that your message partial looks something like this once it's been rendered:

    <div id='message_123'>
      <h3>Message Header</h3>
      <p>This is the body of the message</h3>
    </div>
    

    If this isn't the case, change it so it is. Each message should be wrapped in a div or span that has the ID of that message in it. Then you can add the following method to your Message model:

    def old_messages
      messages = Message.all(:order => 'updated_at DESC')
      if messages.size >= 24
        return messages[24..-1]
      else
        return []
      end
    end
    

    Then, in the action that responds to this request, simply add the line:

    @old_messages = Message.old_messages
    

    And change your RJS to be:

    page.insert_html :top, :messages, :partial => @message
    page[@message].visual_effect :grow
    #page[dom_id(@messages)].replace :partial => @message
    page[:message_form].reset
    @old_messages.each do |m|
      page.remove(m.id)
    end
    

    You can see that I'm using the rails remove method to accomplish the act of taking the unwanted messages out of the DOM.