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
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
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.