views:

643

answers:

1

Hi, I have a div that is getting updated by periodically_call_remote.

When this div is updated I want it to fade in. I know prototype will handle this but I am not sure how.

for example:

periodically_call_remote(:url => 'update', :frequency => '5', :update => 'ticker')

When this content is updated I want it to fade in and fade out so the transitions looks smooth.
A: 

Use callbacks to call some javascript that will take care of the fade in and out.

periodically_call_remote(:url => 'update', :frequency => '5', 
                         :update => 'ticker', 
                         :before => "fadeOut();", :complete => "fadeIn();")

... or something similar

See the documentation :

CALLBACKS   =   Set.new([ :create, :uninitialized, :loading, :loaded, :interactive, :complete, :failure, :success ] + (100..599).to_a)
AJAX_OPTIONS    =   Set.new([ :before, :after, :condition, :url, :asynchronous, :method, :insertion, :position, :form, :with, :update, :script, :type ]).merge(CALLBACKS)

To do the fadeIn and out, prototype or jQuery will do the trick just fine.

marcgg
Thanks for the reply. Unfortunately I don't know about callbacks so I don't know how to use this. I have prototype and I tried adding :before and :complete in the call but no luck. Do I need to add The CALBACKS and AJAX_OPTIONS somewhere?
Sam
No no, the two variables are just here for reference. Use what I wrote at the begining (:before, :complete) and try reading up on rails callbacks, it's very important
marcgg
<%= periodically_call_remote(:url => {:controller => "main", :action => "view"}, :frequency => '5', :update => 'recently_updated_shared_order', :before => visual_effect(:fade, 'recently_updated_shared_order'), :complete => visual_effect(:appear, 'recently_updated_shared_order')) %>
Sam
this could work. I don't use scriptaculous so I'm not sure if it's good or not
marcgg
Yeah, This works. But There is about a 2 second delay between the transition that I don't know how to fix. I tried :delay and queue:, but I don't really know what's going on.
Sam
This delay is the time the request takes take processed. You just need to improve your code.
marcgg