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.

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 &#39;image\_wrapper&#39;, &quot;&lt;img id=\\&quot;my\_image\\&quot;

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