Scriptaculous Problem

Hi All,

I am trying to have a div do the slide up effect, then replace an image
inside a nested div, then do the slide down effect. Should be
straightforward enough, but it looks like the replace_html action is
trying
to run before slide_up has finished. Any idea how I can get replace_html
to
wait until slide_up has finished? Ideally, I would like slide_down to
wait
until the image gets replaced (dynamically generated image), but that is
getting greedy.

Here’s my code

render :update do |page|
  page[:image_controls].visual_effect :slide_up
  page.replace_html 'image_wrapper', "<img id=\"my_image\"

src="/image/#{rand(Time.now.to_i)}">"
page[:image_controls].visual_effect :slide_down
end

Image_controls is a wrapper for image_wrapper, which is a wrapper for
the
img tag

Thanks in advance.

On Jul 16, 9:40 pm, “Joe K” [email protected] wrote:

Here’s my code

render :update do |page|
  page[:image_controls].visual_effect :slide_up
  page.replace_html 'image_wrapper', "<img id=\"my_image\"

src="/image/#{rand(Time.now.to_i)}">"
page[:image_controls].visual_effect :slide_down
end

Effects are basically asynchronous (although of course individual
effects can be put in queues and so on.
Effects can take a number of options, the interesting one here is the
afterFinish: code to execute after the effect has finished.
So if you were writing plain javascript you’d do something like

new Effect.SlideUp($(‘image_controls’), {afterFinish: function(){
$(‘image_wrapper’).update(‘some html’);
new Effect.SlideDown($(‘image_controls’))
}});

I expect you can bend rjs to you will, however I really wouldn’t
bother. Write the function by hand, and if you need to use rjs to call
it.

Fred