using ajax effects properly

rubyonrails-talk
1

I've done a few ajax sites but I've never managed to get effects to work properly so I've decided to ask here.

I've got a div, which on load, contains a title and a 'View' link. When the link is clicked, the div's content is replaced by a table with more info.

How do I go about putting effects in so it does something like this:

* Click the link * Div slides up so it's invisible * The action returns the new div content * Div slides back down to the new height with the new content

And the reverse for when the user clicks the 'Hide' link that is added.

I was using visual_effect(:slide_up, 'myDiv') but that made the div disappear after it slid back down again.

Can someone with knowledge of effects clue me in please?

Thanks

Matt

2

search for the jrails libraries, they contain jquery it has very simple methods to do what you need.

/script/plugin install [http://ennerchi.googlecode.com/svn/trunk/plugins/jrails](http://ennerchi.googlecode.com/svn/trunk/plugins/jrails)

Once you have that installed yo do

<div class="fxBox"><div style="display: block;" class="fx" onclick="$(this).slideUp()"><p>SlideUp</p></div></div>

that is to slide up
to slide down
<div class="fxBox"><div style="" class="fx" onclick="$(this).slideDown()"><p>SlideDown</p></div></div>
3

Felipe Vergara wrote:

search for the jrails libraries, they contain jquery it has very simple methods to do what you need.

/script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails

Once you have that installed yo do

<div class="fxBox"><div style="display: block;" class="fx" onclick="$(this).slideUp()"><p>SlideUp</p></div></div>

that is to slide up to slide down <div class="fxBox"><div style="" class="fx" onclick="$(this).slideDown()"><p>SlideDown</p></div></div>

Hi, thanks for the reply.

I can see that this looks easier, but is it actually going to work like link_to_remote? I mean will it be able to call an action and return the content that the action renders?

I'm not sure but I think I should be looking at combination effects or something.

The actual content replacement and everything works fine, but it doesn't have any effects, it's just a sharp, quick "change" which isn't easy on the eye. I just want to add a slide effect to the update.

Thanks

Matt

4

Check out this snippet

http://snippets.dzone.com/posts/show/3206

5

I'm nearly there, the problem is that :slide_up automatically sets the element to hidden when in fact I want it to stay visible.

I have looked everywhere for a solution but this has really stumped me, how can I stop the element getting hidden between the up and down slides?

Thanks

Matt