Rails - Jun 2006 - Using RJS to highlight one LI if using insert_html on an UL?

It seems common to use RJS for quickly adding and highlighting a list 
that is having content added to it like this:

  http://rafb.net/paste/results/Z3m32g48.html

... where "my_list" would be an UL and the partial would insert a LI.

Given that example, is there an easy way to highlight only the newly 
inserted LI instead of the whole UL? The only way I can see to do it is 
to give each LI a unique identifier in the partial, constructed maybe 
from the db id of the record being represented and then reconstruct that 
id in the RJS and highlight it specifically but it doesnt seem a very 
rails way to do it :)

I am hoping that rails will be helpfully assigning some temporary DOM 
attribute that I havent noticed :)

Thanks
Dave

-- 
Posted via http://www.ruby-forum.com/.

On Jun 21, 2006, at 7:59 AM, Dave Verwer wrote:
> It seems common to use RJS for quickly adding and highlighting a list
> that is having content added to it like this:
>
>   http://rafb.net/paste/results/Z3m32g48.html
>
> ... where "my_list" would be an UL and the partial would insert a
LI.
>
> Given that example, is there an easy way to highlight only the newly
> inserted LI instead of the whole UL? The only way I can see to do  
> it is
> to give each LI a unique identifier in the partial, constructed maybe
> from the db id of the record being represented and then reconstruct  
> that
> id in the RJS and highlight it specifically but it doesnt seem a very
> rails way to do it :)
>
> I am hoping that rails will be helpfully assigning some temporary DOM
> attribute that I havent noticed :)
>
> Thanks
> Dave

Hey Dave-

	Ok I have a nice example for you. First a little extension to AR to  
make each model instance have a dom_id method. Put this in lib and  
require it in environment.rb

class ActiveRecord::Base
   def dom_id(prefix=nil)
     display_id = new_record? ? "new" : id
     prefix ||= self.class.name.underscore
     prefix != :bare ? "#{prefix.to_s.dasherize}-#{display_id}" :  
display_id
   end
end

# In index.rhtml view

<h2>Products</h2>
<ul id="products">
     <% @products.each do |p| %>
	  <li id=''<%= p.dom_id -%>''> <h3><%=
p.name -%> </h3><%=
link_to_remote "delete", :url => { :action =>
"delete_product", :id
=> p} %> </li>
	<% end %>
</ul>
<hr />
<div id="add_product_form">
     <h3>Add a Product</h3>
     <%= error_messages_for "product" %>
<fieldset>
     <% remote_form_for :product, @product, :url => { :action =>  
"add_product" },
					   :loading =>
"Element.show(''product_spinner'')" do |f| %>
         <%= f.text_field :name %>					
		<%= submit_tag ''Create Product'', :class =>
''submit_but'' %>
		<%= spinner(''product_spinner'') %>
	<% end %>				
</fieldset>
</div>

# _product.rhtml partial for one li item

<li id=''<%= @product.dom_id -%>''> <h3><%=
@product.name -%> </h3><%=
link_to_remote "delete", :url => { :action =>
"delete_product", :id
=> @product} %> </li>

# controller for adding and deleting products

class AdminController < ApplicationController
   before_filter :login_required
   def index
     @products = @account.projects.find :all
   end

   def add_product
     @product = @account.products.new(params[:product])
     if @product.save
       render :update do |page|
         page.hide ''product_spinner''
         page.insert_html :bottom, ''products'', :partial =>
''product'', :object => @product
         page[@product.dom_id].visual_effect :highlight
       end
     else
       render :action => ''index''
     end
   end

   def delete_product
     product = @account.products.find(params[:id]).destroy
     render :update do |page|
       page[product.dom_id].visual_effect :slide_up
     end
   end
end


Hope that helps-

Cheers-
-Ezra

Ezra

Thanks for the very comprehensive reply.

Dave

-- 
Posted via http://www.ruby-forum.com/.