RJS and Queues
Gordon Anderson
I've been lurking for a while, envious of all you Rails coders and
indeed went to the last talk on REST whilst hugging the fan to keep
cool. Currently I have some spare time and as such have been learning
Rails feverishly, I'm loving the AJAX stuff and RJS.
The syntax can however to say the least be a little baffling at times
and I am stuck on how to queue script.aculo.us effects in RJS
templates. For testing purposes, what I currently have in my RJS
template, to update a photograph after a next and previous arrow
click, is this
page.visual_effect :fade, 'photoMain', :from => 1, :to =>
0.1, :duration => 2
page.replace_html 'photoMain', :partial => "single_photo"
page.replace_html 'photoTitle', @photograph.title
page.replace_html 'directions', :partial => "ajax_directions"
My intention was to have the current image fade to almost invisible
but not totally invisible otherwise the div collapses [I have
deliberately extended the duration by the way so I can see what is
happening] After the fade has happened I replace portions of the page
using standard replacement of elements tagged with an id.
Now what actually happens is this
1. The fade starts but does not wait until reaching the next
instruction
2. The title, photograph and thumbnails for next and previous are
updated on the fly.
3. After 2 seconds the *new* image has faded away!
I have seen reference to this problem with link_to_remote helper
functionality, solved by using javascript of this form
new Effect.BlindDown('target', {queue: 'end'})
Is it possible to create this effect in an RJS template? I tried
various forms of syntax but with no luck.
I am also developing on an older version of rails (1.1.6) - how much
pain would be involved upgrading to 1.2 if any?
Cheers
Gordon
Tomek Piatek
hi everyone
I've been lurking for a while, envious of all you Rails coders and
Welcome!
Now what actually happens is this
1. The fade starts but does not wait until reaching the next
instruction
2. The title, photograph and thumbnails for next and previous are
updated on the fly.
3. After 2 seconds the *new* image has faded away!
All scriptaculous effect happen asynchronously. So you have to use effect queues.
Here's an excellent tutorial on effect queues:
http://blog.railsdevelopment.com/pages/effect/queue/
I have seen reference to this problem with link_to_remote helper
functionality, solved by using javascript of this form
new Effect.BlindDown('target', {queue: 'end'})
Is it possible to create this effect in an RJS template? I tried
various forms of syntax but with no luck.
One thing to remember is that the "page" object in an RJS template is really
a javascript proxy. This means that if there isn't a native RJS command to do
what you need you can always do something like this:
page << some javascript code (may have to quote it, I don't remember)
Also, if you have some javascript object, lets call it "foo" which has a method named "bar()" then you can do this:
page.foo.bar()
Neat, huh?
I am also developing on an older version of rails ( 1.1.6) - how much
pain would be involved upgrading to 1.2 if any?
There should be no pain at all. I have been developing on 1.1.6 on my Mac and I just did "gem upgrade rails" and everything just worked. Your mileage may vary if you're on Windows.
-t
Orion Edwards
> From: WellR...@googlegroups.com [mailto:WellR...@googlegroups.com]
> On Behalf Of Gordon Anderson
> Sent: Tuesday, 13 February 2007 10:04 p.m.
> To: WellRailed
> Subject: RJS and Queues
>
> ...
> templates. For testing purposes, what I currently have in my RJS
> template, to update a photograph after a next and previous arrow
> click, is this
>
> page.visual_effect :fade, 'photoMain', :from => 1, :to =>
> 0.1, :duration => 2
> page.replace_html 'photoMain', :partial => "single_photo"
> page.replace_html 'photoTitle', @photograph.title
> page.replace_html 'directions', :partial => "ajax_directions"
>
> My intention was to have the current image fade to almost invisible
> but not totally invisible otherwise the div collapses [I have
> deliberately extended the duration by the way so I can see what is
> happening] After the fade has happened I replace portions of the page
> using standard replacement of elements tagged with an id.
>
The scriptaculous visual effects are asynchronous. IE: The 'new Effect'
function call only takes 1ms, and the rest of the 2 second fade happens
"in the background."
If you want to do something after an effect has completed you have 2
options - one is to use Effect queues, as Tomek mentioned, although I
don't know how you'd attach an arbitrary function to an effect queue,
as I've not done that before.
The other option is to use the scriptaculous callbacks. Every
effect in scriptaculous has several callbacks, see here:
http://wiki.script.aculo.us/scriptaculous/show/CoreEffects
You could therefore do this:
function afterFadeFinish() {
alert('fade is done');
}
new Effect.Fade( 'foo', { from:1.0, to:0.01, duration:1,
afterFinish:afterFadeFinish } );
which causes a 1 second fade of element id foo, and alerts when complete.
I'll leave it up to you to convert that to RJS if you like :-)
Ivan Porto Carrero
Which allows you to write normal javascript and include rails templates etc.
It feels a bit more natural to write than rjs.
You can find it here :
http://www.danwebb.net/2006/11/24/minusmor-released
http://svn.danwebb.net/external/rails/plugins/minus_mor/trunk
> -----Original Message-----
> From: WellR...@googlegroups.com [mailto:WellR...@googlegroups.com]
> On Behalf Of Gordon Anderson
> Sent: Tuesday, 13 February 2007 10:04 p.m.
> To: WellRailed
> Subject: RJS and Queues
>
> ...
> templates. For testing purposes, what I currently have in my RJS
> template, to update a photograph after a next and previous arrow
> click, is this
>
> page.visual_effect :fade, 'photoMain', :from => 1, :to =>
> 0.1, :duration => 2
> page.replace_html 'photoMain', :partial => "single_photo"
> page.replace_html 'photoTitle', @photograph.title
> page.replace_html 'directions', :partial => "ajax_directions"
>
> My intention was to have the current image fade to almost invisible
> but not totally invisible otherwise the div collapses [I have
> deliberately extended the duration by the way so I can see what is
> happening] After the fade has happened I replace portions of the page
> using standard replacement of elements tagged with an id.