Welcome to Working With Rails


Discussion Forums

Discuss all things Ruby on Rails with perhaps the web's most vibrant group of Ruby on Rails enthusiasts.
11 Posts

Hi there.

I've trying to use some effects in divs with ajax, until now works fine, but here's the problem:

I have a div, i need when i click in some link_to_remote, makes that div disappear and appear again...IN THE SAME CLICK.

i try that:

"detalhes_produto", :url=>{:action =>"exibir_detalhe_produto", :idproduto =>produto.id}, :loading =>visual_effect(:fade, "detalhes_produto", :duration =>0.3),:complete => visual_effect(:show, "detalhes_produto", :duration =>0.3)%>

just to make clear, a need to make the same div, disappear and appear in a row.

Someone can help me?


If I'm understanding your intention correctly: use @:before@ instead of @:loading@

Doesn't work =\

still just flashing the div on the screen.

Sorry, on internet explorer works...but not in firefox

Oh wait, you've got the effect on the same element that you're updating with the AJAX? I'm a bit lost now as to what you're trying to do. Maybe you could clarify.

Hmmm, i will try make the idea clear for you:

I have one DIV, and many links to remotes...when you click that links, i need update the div with ajax...But think with me, if i just use "complete => visua_effect (toggle_appear, "id_div", :duration =>1)", when i click in some link, the div will disappear, when i click again will appear...understand? i need to do the both efects in a row, to give the user a sensation of "disappear and appear" with the results of the new query...got it?

tell me if i make it clear


You've changed now from a @show@ and @fade@ pairing, to talking about using a toggle effect. It doesn't really matter though.

No, is the answer. No, you won't need to click the button twice. As I said, take your original example and just change the @:loading@ callback to a @:before@ callback. So then you'll have two callbacks defined for your @link_to_remote@: a @:before@ which is called before the AJAX call is made and a @:complete@ which is called when the AJAX call has completed.

The @:before@ will hide the element, and the @:complete@ will show it again. One click, two callbacks.

i will try again. maybe the problem here is the navigator.

your idea works great in internet explorer 8 but not in firefox..

Anyway, very thank's for the patience, your tips are very helpfull

Here is another solution, but it can not tell the end user whether the query is executing or not:

Only an completed callback is needed, with two effects together, using this

onComplete: function(transport) {
  new Effect.Fade('div', { duration: 0.5 });
  new Effect.Appear('div', { duration: 0.5, delay: 0.5 })

to make an queue of effects and then play in order.

I think that's will be the right thing you want.

Hi, I'm having a similar problem as the original poster. Hopefully someone can help me out. My original goal was to use Ajax to go from picture to picture without repainting the entire page. which worked out GREAT!

 :update   =>  "portfolio_image",
 :url      =>  {:action => 'ajax_show', :id => @portfolio.next_record} unless @portfolio.next_record.nil? %>*

when clicking the next button the next picture was rendered in my partial view, I thought SWEET now lets make it fancy and add appear and fade effects!

 :update   =>  "portfolio_image",
 :url      =>  {:action => 'ajax_show', :id => @portfolio.next_record},
 :before   =>  visual_effect(:fade, 'portfolio_image', :duration => 5),
 :complete =>  visual_effect(:appear, 'portfolio_image', :duration => 5) unless @portfolio.next_record.nil? %>*

My expected result is:

the existing div fades out

the image increments

the div reappears with the new image

what I get is:

the image increments

the image fades but doesn't reappear

This happens in any browser I try

11 Posts
Login to add your message