Timing of effects before and after Ajax call


#1

Hello,

I have a problem with the timing of effects. I do have a tag (with id:
post1). When the link is clicked, the block “post1” must BlindUp. Then
the
block is updated with the new content and then the effect BlindDown is
executed.

Below is the source code of the link_to_remote I am using.

<%= link_to_remote(“Ajax Edit”,
:update => ‘post1’,
:before => “new Effect.BlindUp(‘post1’)”,
:complete => “new Effect.BlindDown(‘post1’, {queue:
end’})”,
:url => { :action => :ajax_edit, :id => post }) %>

The problem is that during the BlindUp effect, the block is already
updated
so while the block is “closing”, the new content is already visible for
the
user. Is it possible to make sure that the content of the block is
changed
AFTER the effect BlindUp is completed?

Thank you in advance,

Axel


#2

Make a new div in ‘post1’ for example ‘content’

:update => ‘content’
:loading => “Element.hide(‘content’);new Effect.BlindUp(‘post1’)”,

So we reverse the problem.
Even if it fills the data in the div it is hidden from view.
Not tested but I think it maybe will work.


#3

I don’t get it. You are using two div’s. What if you are updating the
div that you are trying to fade out and then in? Where would you place
this content div?

Peter wrote:

Make a new div in ‘post1’ for example ‘content’

:update => ‘content’
:loading => “Element.hide(‘content’);new Effect.BlindUp(‘post1’)”,

So we reverse the problem.
Even if it fills the data in the div it is hidden from view.
Not tested but I think it maybe will work.


#4

I never found an answer to this question, and I would like to know also.
I can’t seem to find any documentation on the web for this.

On Thu, 2006-03-02 at 09:17 +0100, Axel Derks wrote:

the block is changed AFTER the effect BlindUp is completed?
Rails mailing list
removed_email_address@domain.invalid
http://lists.rubyonrails.org/mailman/listinfo/rails

Charlie B.
Programmer
Castle Branch Inc.


#5

Did anyone ever figure out how to work around this? It seems like a
common enough problem.

charlie bowman wrote:

The following works great by hiding a div and then fading it in, but it
won’t work with a fade out and then a fade in. The “right_content”
keeps switching before the fadeout is over. I’ve been asking this
question for two days and I know somebody out there knows or atleast
knows of an example on the web, right?


#6

The only hack I came up with was to use the rjs delay function. There
is currently no other way to accomplish this without writing you own
javascript code. This is the number one thing on my rails wishlist.

Charlie bowman
www.recentrambles.com


#7

The following works great by hiding a div and then fading it in, but it
won’t work with a fade out and then a fade in. The “right_content”
keeps switching before the fadeout is over. I’ve been asking this
question for two days and I know somebody out there knows or atleast
knows of an example on the web, right?

<%= link_to_remote(image_tag(url_for_file_column(product, “image_url”),
“class” =>
“product_hover”,
“onMouseOver” =>
“this.className = ‘small_product’”,
“onMouseOut” =>
“this.className = ‘product_hover’”),
:before =>
visual_effect(:fade, “right_content”, :duration => 0.5, :queue =>
‘front’),
:loading =>
“Element.hide(‘right_content’)”,
:update =>
‘right_content’,
:url => {
:action => :product_details,
:id
=> product.id },
:complete =>
visual_effect(:appear, “right_content”, :duration => 1.5,:queue =>
‘end’)
)%>


#8

Charlie B. wrote:

The only hack I came up with was to use the rjs delay function. There
is currently no other way to accomplish this without writing you own
javascript code. This is the number one thing on my rails wishlist

That’s too bad. I have a big fat static page full of divs, and I’m
currently navigating between them by fading one out while fading the
next one in. I was hoping that Rails would let me refactor all that
content into separate files, while keeping the trippy crossfade.

What I’d really like to do is simultaneously (more or less) fade out the
old content while fading in the new, and I don’t think I can accomplish
that anyway… not without using multiple divs as buffers or something,
and that’s the problem I’m trying to get rid of.