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