# Scriptaculous Problem

**URL:** <https://www.ruby-forum.com/t/scriptaculous-problem/143278>\
**Category:** Rails\
**Created:** [July 16, 2008, 10:41pm UTC](https://www.ruby-forum.com/t/scriptaculous-problem/143278 "2008-07-16T22:41:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joe\_K](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/5e9695/32.png) [@Joe\_K](https://www.ruby-forum.com/u/Joe_K)\
**Post date:** [July 16, 2008, 10:41pm UTC](https://www.ruby-forum.com/t/scriptaculous-problem/143278/1 "2008-07-16T22:41:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Joe\_K](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/5e9695/32.png) [@Joe\_K](https://www.ruby-forum.com/u/Joe_K)\
**Post date:** [July 16, 2008, 11:19pm UTC](https://www.ruby-forum.com/t/scriptaculous-problem/143278/2 "2008-07-16T23:19:01Z")

</div>

On Jul 16, 9:40 pm, “Joe K” [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) 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