Problem getting AJAX effect to work with RubyOnRails

Question

I want to remove a row from an HTML table generated by some Rails code and I'd like the other rows to "Slide Up" into the new position.

I'm kind of new to this and I'm sure I've probably made a simple mistake.

Here is the partial code to generate the table row:

<tr id="ride_<%=h ride.id %>">
  <td><%=h ride.name %></td>
  <td><%=h ride.land %></td>
  <td align="right"><%=h ride.height_restriction %></td>
  <td><%= link_to_remote 'remove', :url => { :action => :destroy, :ride_id => ride.id }, :html => {:onclick => "Effect.SlideUp('ride_" + ride.id.to_s + "')"} %></td>
</tr>

And here is the HTML generated from that partial:

<tr id="ride_130">
  <td>thrill ride</td>
  <td>fun land</td>
  <td align="right">40</td>
  <td><a href="#" onclick="Effect.SlideUp('ride_130'); new Ajax.Request('/SimpleRailsApp/rides/destroy?ride_id=130', {asynchronous:true, evalScripts:true, parameters:'authenticity_token=' + encodeURIComponent('9f2334b84d2da7eddfbfaadf8138c0a1c8feca47')}); return false;">remove</a></td>
</tr>

Now, the row deletes alright, but I don't get the cool AJAX effect. It just sort of "snaps" up.

So far "Puff" is the only effect I've been able to make work.

Any help or advice would be appreciated.

UPDATE

Could it be that this effect does not work inside of a table element? I've tried almost the exact code on an unordered list and it seems to work fine.

I've also found this other question that says animations don't work on tables in JQurery either, so I may be out of luck here.

Answer 1

Since the animation is "snapping," you might want to try adding a duration option: Effect.SlideUp('id_of_element', { duration: 3.0 });

Answer 2

Did you include the default JS libraries?

<%= javascript_include_tag :defaults %>

Answer 3

I've found this other Stack Overflow answer to a question that says animations don't work on tables in JQurery either, so I'm probably out of luck here.