使 AJAX 效果与 RubyOnRails 一起使用时出现问题

发布于 2024-07-29 05:11:47 字数 1461 浏览 2 评论 0原文

我想从一些 Rails 代码生成的 HTML 表中删除一行,并且希望其他行“向上滑动”到新位置。

我对此有点陌生,我确信我可能犯了一个简单的错误。

下面是生成表行的部分代码:

<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>

下面是从该部分生成的 HTML:

<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>

现在,行删除正常,但我没有获得很酷的 AJAX 效果。 它只是有点“突然”起来。

到目前为止,“Puff”是我能够制作的唯一效果。

任何帮助或建议将不胜感激。

更新

这个效果在表格元素内部是否不起作用? 我已经在无序列表上尝试了几乎完全相同的代码,它似乎工作得很好。

我还发现了这个 另一个问题说动画也不适用于 jQuery 中的表格,所以我在这里可能不走运。

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 jQuery either, so I may be out of luck here.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

╰沐子 2024-08-05 05:11:47

由于动画是“捕捉”的,您可能需要尝试添加持续时间选项:
Effect.SlideUp('id_of_element', { 持续时间: 3.0 });

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

终止放荡 2024-08-05 05:11:47

你是否包含了默认的 JS 库?

<%= javascript_include_tag :defaults %>

Did you include the default JS libraries?

<%= javascript_include_tag :defaults %>
兔姬 2024-08-05 05:11:47

我发现 Stack Overflow 上对一个问题的回答说动画也不能在 jQuery 中的表格上工作,所以我在这里可能不走运。

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文