The Scriptaculous afterFinish problem
20061101
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
20080619 07:18
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…
20080620 18:34
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.
20080621 11:36
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 =)
20080704 08:45
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()); } });