Confused as to which Prototype helper to use

Question

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?

Answer 1

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.

Answer 2

Maybe these steps can help.

1. Return the "deleted messages" as array of AR hashes or just IDs
2. Render the HTML element for each message with ID of AR object in the ID of HTML element
3. Use the IDs to identify the HTML elements on the form and replace with a blank HTML element

And you have a working solution. I hope this helps.