Get updates

Scott The Scriptaculous afterFinish problem

On the heels of working out the proper syntax to use when returning JavaScript to execute after an Ajax request, I ran into trouble with a Scriptaculous effect callback.

As the name suggests, I expected afterFinish to call my function right after the effect finishes. Simple testing with an alert shows that it instead seems to call the function as the effect is getting started, shortly after the beforeStart callback triggers. Apparently I’m not the only one having this problem.

Further investigation shows this problem only affects a couple of effects:

  • Squish
  • SwitchOff

While these effects handle it just fine:

  • Appear
  • Fade
  • BlindUp
  • BlindDown
  • SlideUp
  • SlideDown
  • Grow
  • Shrink
  • DropOut
  • Fold (afterFinish triggered just before the element was reduced to nothing/hidden)
  • Puff

For the record, the proper syntax for these effects callbacks with anonymous functions looks like this (try this in your address bar – the JavaScript command line, if you are working with Scriptaculous libraries):
javascript:var temp = new Effect.Fade('element_id', { beforeStart: function() { alert('start') }, afterFinish: function() { alert('finish') } } );

Alternately you can call your own existing functions by simply including the function name (without parentheses):
javascript:var temp = new Effect.Fade('element_id', { beforeStart: functionObj, afterFinish: functionObj } );

I don’t know if I have the time, but I can be pretty stubborn about these things… I’m tempted to digest Scriptaculous line by line until I understand how it all works so that I can create a fix.

Update (20061122): Try this solution: Scriptaculous Effect.Squish afterFinish callback fix

7 Responses to “The Scriptaculous afterFinish problem”

  1. Dan Says:

    Hello, any luck with this? Appreciate this post is old but I’m using Effect.toggle and I need to call a function when it finishes. I’ve used:

    Effect.toggle(boxID, ‘slide’, { afterFinish:alert($(‘parent’).getHeight()) });

    But the alert appears before the effect finishes…

  2. Did you try the callback fix? I discovered the link in the post was broken and have updated it as well.

    Let me know if that solution works for you.

  3. Dan Says:

    Hi, n I didn’t need to go that far, I simply defined the function as a variable and passed it to the toggle constructor:

    var mycallback = function() {
    alert(“it now works!”);

    Effect.toggle(boxID, ‘slide’, { afterFinish:mycallback });

    This worked fine, probably a slightly different problem (like me not doing it right) than the squish problem, but thanks for the reply nevertheless =)

  4. Ah… yep; previously I failed to see in your first example that your code was actually calling alert immediately, rather than wrapping it in an anonymous function like so:

    Effect.toggle(boxID, ’slide’, { afterFinish: function(){ alert($(’parent’).getHeight()); } });

  5. s? mi n? d? th??ng hàn qu?c

    The Scriptaculous afterFinish problem – Development – 3DM Design

  6. áo khoác n? th?i trang

    The Scriptaculous afterFinish problem – Development – 3DM Design

  7. como ganhar dinheiro na internet

    The Scriptaculous afterFinish problem – Development – 3DM Design

Leave a Reply