Jean-Christophe Roux
2007-Aug-10 18:14 UTC
order of execution in callback for Ajax.Request
Hello,
There is a div
<div id=''about_id'' style=''display: none''
class=''abc''>the ABCc</div>;
and a button that is linked to a
var myAjax = new Ajax.Request(url,
{ method: ''post'',
parameters: pars,
onSuccess: function(transport)
{
new
Effect.Fade(''about_id'');
$(''about_id'').update(transport.responseText);
new
Effect.Appear(''about_id'');
}
}
);
I was expected to see, upon clicking the button, the ABCs to fade away, then the
substitution to be done while the screen is blank and the new text toappear
progressively.
Instead, the ABC is brutaly replaced by the new text, which disappears leaving
me with a blank page; not exactly what was expecting!
Firefox and IE have the same behavior; what am I doing wrong?
Thank you
____________________________________________________________________________________
Choose the right car based on your needs. Check out Yahoo! Autos new Car Finder
tool.
http://autos.yahoo.com/carfinder/
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Effects occur asynchronously, so based on your code, what you''re describing makes sense. Have a look at the afterFinish callback. http://wiki.script.aculo.us/scriptaculous/show/CoreEffects TAG On Aug 10, 2007, at 12:14 PM, Jean-Christophe Roux wrote:> Hello, > There is a div > <div id=''about_id'' style=''display: none'' class=''abc''>the ABCc</div>; > and a button that is linked to a > var myAjax = new Ajax.Request(url, > { method: ''post'', > parameters: pars, > onSuccess: function(transport) > { > new Effect.Fade(''about_id''); > $(''about_id'').update > (transport.responseText); > new Effect.Appear(''about_id''); > } > } > ); > I was expected to see, upon clicking the button, the ABCs to fade > away, then the substitution to be done while the screen is blank > and the new text toappear progressively. > Instead, the ABC is brutaly replaced by the new text, which > disappears leaving me with a blank page; not exactly what was > expecting! > Firefox and IE have the same behavior; what am I doing wrong? > Thank you > > Be a better Globetrotter. Get better travel answers from someone > who knows. > Yahoo! Answers - Check it out. > >--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Jean-Christophe Roux
2007-Aug-10 19:05 UTC
Re: order of execution in callback for Ajax.Request
Hello,
Thanks for the idea. I rewrote my function using beforeStart and afterFinish to
better control the order of execution within my on Success callback function. it
is becoming a bit difficult to read, even with indenting. And the issue is still
there because the Fade is last when it should be first. To be complete for my
example, onload, I call a function that use new Effect.Appear ont the div so
that the ABCs can be seen. I still don''t understand why the onSuccess
callback function does not execute the statements in the order they are written
Regards
onSuccess: function(transport)
{
new
Effect.Appear(''about_id'',
{beforeStart:
function(effect)
{
new
Effect.Fade(''about_id'',
{afterFinish: function(effect)
{
$(''about_id'').update(transport.responseText);
}
});
}
});
}
}
);
----- Original Message ----
From: Jean-Christophe Roux <jcxxr-/E1597aS9LQAvxtiuMwx3w@public.gmane.org>
To: rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
Sent: Friday, August 10, 2007 2:14:35 PM
Subject: [Rails-spinoffs] order of execution in callback for Ajax.Request
Hello,
There is a div
<div id=''about_id'' style=''display: none''
class=''abc''>the ABCc</div>;
and a button that is linked to a
var myAjax = new Ajax.Request(url,
{ method: ''post'',
parameters:
pars,
onSuccess: function(transport)
{
new
Effect.Fade(''about_id'');
$(''about_id'').update(transport.responseText);
new
Effect.Appear(''about_id'');
}
}
);
I was expected to see, upon clicking the button, the ABCs to fade away, then the
substitution to be done while the screen is blank and the new text toappear
progressively.
Instead, the ABC is brutaly replaced by the new text, which disappears leaving
me with a blank page; not exactly what was expecting!
Firefox and IE have the same behavior; what am I doing wrong?
Thank you
Be a better Globetrotter. Get better travel answers from someone who
knows.
Yahoo! Answers - Check it out.
____________________________________________________________________________________
Boardwalk for $500? In 2007? Ha! Play Monopoly Here and Now (it''s
updated for today''s economy) at Yahoo! Games.
http://get.games.yahoo.com/proddesc?gamekey=monopolyherenow
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
You''re still missing the key point: EFFECTS ARE ASYNCHRONOUS.
(I''m
not yelling, just emphasizing. Really. ;)
That means the next line of code will be executed, even if the Effect
hasn''t finished (which it won''t do instantaneously, by
definition).
Effects are designed to run in *parallel* with your other code.
Subsequent code is not contingent on Effect completion. It must be
that way, or all Javascript on the page would stop for the duration
of the effect.
What that means is your putting the Effect.Fade in the beforeStart
callback still doesn''t prevent Fade and Appear from being executed in
parallel.
The simplest way to do this is by chaining afterFinish calls:
new Effect.fade(el, {
afterFinish: function () {
$(el).update(transport.responseText);
new Effect.Appear(el);
}
});
A more complex way of achieving the same thing by using queues:
new Effect.fade(el, {
afterFinish: function () {
$(el).update(transport.responseText);
},
queue: {scope: el.id, position: ''end'' }
});
new Effect.Appear(el, {
queue: {scope: el.id, position: ''end'' }
});
TAG
On Aug 10, 2007, at 1:05 PM, Jean-Christophe Roux wrote:
> Hello,
>
> Thanks for the idea. I rewrote my function using beforeStart and
> afterFinish to better control the order of execution within my on
> Success callback function. it is becoming a bit difficult to read,
> even with indenting. And the issue is still there because the Fade
> is last when it should be first. To be complete for my example,
> onload, I call a function that use new Effect.Appear ont the div so
> that the ABCs can be seen. I still don''t understand why the
> onSuccess callback function does not execute the statements in the
> order they are written
> Regards
> onSuccess: function(transport)
> {
> new
Effect.Appear(''about_id'',
> {beforeStart:
> function(effect)
> {
>
> new Effect.Fade(''about_id'',
>
> {afterFinish: function(effect)
>
> {
>
>
$(''about_id'').update(transport.responseText);
>
> }
>
> });
> }
> });
> }
> }
> );
>
> ----- Original Message ----
> From: Jean-Christophe Roux
<jcxxr-/E1597aS9LQAvxtiuMwx3w@public.gmane.org>
> To: rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
> Sent: Friday, August 10, 2007 2:14:35 PM
> Subject: [Rails-spinoffs] order of execution in callback for
> Ajax.Request
>
> Hello,
> There is a div
> <div id=''about_id'' style=''display:
none'' class=''abc''>the ABCc</div>;
> and a button that is linked to a
> var myAjax = new Ajax.Request(url,
> { method: ''post'',
> parameters: pars,
> onSuccess: function(transport)
> {
> new
Effect.Fade(''about_id'');
> $(''about_id'').update
> (transport.responseText);
> new
Effect.Appear(''about_id'');
> }
> }
> );
> I was expected to see, upon clicking the button, the ABCs to fade
> away, then the substitution to be done while the screen is blank
> and the new text toappear progressively.
> Instead, the ABC is brutaly replaced by the new text, which
> disappears leaving me with a blank page; not exactly what was
> expecting!
> Firefox and IE have the same behavior; what am I doing wrong?
> Thank you
>
> Be a better Globetrotter. Get better travel answers from someone
> who knows.
> Yahoo! Answers - Check it out.
>
>
>
> Need a vacation? Get great deals to amazing places on Yahoo! Travel.
> >
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
Jean-Christophe Roux
2007-Aug-10 22:59 UTC
Re: order of execution in callback for Ajax.Request
Hello,
That''s right I had not fully realized that the effect were
asynchronuous within the callback function. The system works fine now.
THANK YOU VERY MUCH
----- Original Message ----
From: Tom Gregory <tomg-PGZyUNKar/Q@public.gmane.org>
To: rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
Sent: Friday, August 10, 2007 3:16:42 PM
Subject: [Rails-spinoffs] Re: order of execution in callback for Ajax.Request
You''re still missing the key point: EFFECTS ARE ASYNCHRONOUS.
(I''m not yelling, just emphasizing. Really. ;)
That means the next line of code will be executed, even if the Effect
hasn''t finished (which it won''t do instantaneously, by
definition). Effects are designed to run in *parallel* with your other code.
Subsequent code is not contingent on Effect completion. It must be that way, or
all Javascript on the page would stop for the duration of the effect.
What that means is your putting the Effect.Fade in the beforeStart callback
still doesn''t prevent Fade and Appear from being executed in parallel.
The simplest way to do this is by chaining afterFinish calls:
new Effect.fade(el, {
afterFinish: function () {
$(el).update(transport.responseText);
new Effect.Appear(el);
}
});
A more complex way of achieving the same thing by using queues:
new Effect.fade(el, {
afterFinish: function () {
$(el).update(transport.responseText);
},
queue: {scope: el.id, position: ''end'' }
});
new Effect.Appear(el, {
queue: {scope: el.id, position: ''end'' }
});
TAG
On Aug 10, 2007, at 1:05 PM, Jean-Christophe Roux wrote:
Hello,
Thanks for the idea. I rewrote my function using beforeStart and afterFinish to
better control the order of execution within my on Success callback function. it
is becoming a bit difficult to read, even with indenting. And the issue is still
there because the Fade is last when it should be first. To be complete for my
example, onload, I call a function that use new Effect.Appear ont the div so
that the ABCs can be seen. I still don''t understand why the onSuccess
callback function does not execute the statements in the order they are written
Regards
onSuccess: function(transport)
{
new
Effect.Appear(''about_id'',
{beforeStart:
function(effect)
{
new
Effect.Fade(''about_id'',
{afterFinish: function(effect)
{
$(''about_id'').update(transport.responseText);
}
});
}
});
}
}
);
----- Original Message ----
From: Jean-Christophe Roux <jcxxr-/E1597aS9LQAvxtiuMwx3w@public.gmane.org>
To: rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
Sent: Friday, August 10, 2007 2:14:35 PM
Subject: [Rails-spinoffs] order of execution in callback for Ajax.Request
Hello,
There is a div
<div id=''about_id'' style=''display: none''
class=''abc''>the ABCc</div>;
and a button that is linked to a
var myAjax = new Ajax.Request(url,
{ method: ''post'',
parameters: pars,
onSuccess: function(transport)
{
new
Effect.Fade(''about_id'');
$(''about_id'').update(transport.responseText);
new
Effect.Appear(''about_id'');
}
}
);
I was expected to see, upon clicking the button, the ABCs to fade away, then the
substitution to be done while the screen is blank and the new text toappear
progressively.
Instead, the ABC is brutaly replaced by the new text, which disappears leaving
me with a blank page; not exactly what was expecting!
Firefox and IE have the same behavior; what am I doing wrong?
Thank you
Be a better Globetrotter. Get better travel answers from someone who knows.
Yahoo! Answers - Check it out.
Need a vacation? Get great deals to amazing places on Yahoo! Travel.
____________________________________________________________________________________
Luggage? GPS? Comic books?
Check out fitting gifts for grads at Yahoo! Search
http://search.yahoo.com/search?fr=oni_on_mail&p=graduation+gifts&cs=bz
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---