Fade out, update by AJAX, fade in a div using Prototype

Question

I have a div whose contents I want to update by AJAX. To make the transition smooth, I'd like to fade out the old contents, then update it with the AJAX response, then fade it back in.

My first attempt is as follows; but of course the AJAX can complete before the fade() call, resulting in appear() not firing properly and the end-state being faded out. How can I make this work as I want?

target = $('card_text_' + index);
new Ajax.Request('/games/card_text', 
         {asynchronous:false, 
          evalScripts:true, 
          method:'get', 
          parameters:'type=' + value,
          onCreate: function(){target.fade()},
          onSuccess: function(e){target.update(e.responseText).appear()}
          });

Edit: For completeness, I'm using Prototype with script.aculo.us

score 2 · Accepted Answer · answered Jan 12 '11 at 17:22

I have found the solution I wanted, although the docs didn't make it easy. Turns out, all script.aculo.us Effects have a set of callbacks, including afterFinish. My code has become:

target = $('card_text_' + index);
new Effect.Fade(target, {afterFinish: function(){
  new Ajax.Updater(target, '/games/card_text', 
           {asynchronous:false, 
            evalScripts:true, 
            method:'get', 
            parameters:'type=' + value,           
            onSuccess: function(e){new Effect.Appear(target)}
            });

score 0 · Answer 2 · answered Jan 10 '11 at 17:34

Most unmaintainable solution so far was to handle appear with timer and flags to see if both fade and request had completed.

Timer could be changed with function call after update and fade.

In both cases it tends to end in mess.

score 0 · Answer 3 · answered Jan 10 '11 at 17:59

0

I think the better approach is to make the AJAX call first. Then, when it is done, fade the div out. When the fade is done, replace the contents and fade it back in.

answered Jan 10 '11 at 17:59

JohnO

1,889
1
12
15

Two problems with this: 1 - I'd like it to fade out immediately as a clear progress indicator. 2 - fade() completes asynchronously, so `elem.fade(); elem.appear()` fires both effects more-or-less at once. – Chowlett Jan 10 '11 at 18:39

Fade out, update by AJAX, fade in a div using Prototype

3 Answers3