如何在 best_in_place 编辑完成后触发事件？

Posted 2023-02-15

【中文标题】如何在 best_in_place 编辑完成后触发事件？

【英文标题】：How to trigger events upon the completion of a best_in_place edit?

【发布时间】：2012-04-25 10:46:16

【问题描述】：

在显示页面中，我显示了一个周期性事件发生的日期列表，并计算了所有日期的统计数据，例如连续日期之间的最大、最小和平均间隔。

我使用 best_in_place gem 来允许就地编辑日期。但是，每次更改日期时，都必须计算统计信息并从服务器重新呈现。

如何将回调函数与 best_in_place 编辑的完成挂钩，以便重新渲染统计信息？

这是我在 show.html.erb 中的 Rails 代码

<td id="event_date">
  <%= best_in_place @event, :occur_date %>
</td>

在html中是

<td id="event_date"> 
    <span class='best_in_place' id='best_in_place_event_132_occur_date' data-url='/events/132' data-object='event' data-attribute='occur_date' data-type='input'>2012-03-23</span>
</td>

我尝试了以下咖啡脚本代码：

jQuery ->
$("#best_in_place_event_*_occur_date").live 'ajax:complete', (evt, data, status, xhr) ->
  alert "a date has changed"

这似乎不起作用，在我编辑日期 (occur_date) 后没有任何反应。

有人知道我应该如何在 best_in_place 编辑成功后触发事件吗？

【问题讨论】：

你说，“统计数据必须从服务器计算和重新渲染。”所以这种重新计算发生在模型中，并在更新操作中从控制器调用，对吗？只是想在回答之前弄清楚我的事实。

是的，统计数据计算在模型中完成，并且统计数据（例如 max、min、avg）不存储在 ActiveRecord 中。不确定我是否做得对，但我没有通过控制器，我有视图调用模型方法。这是我的代码。在views/events/show.html.erb "events_stats", :locals => :event => @event%> 在views/events/_event_stats.html.erb: 最短： 天 最长： 天 平均： 天

【参考方案1】：

至于你的例子：

<td id="event_date">
  <%= best_in_place @event, :occur_date, :classes => 'bip_date' %>
</td>

$('.bip_date').bind("ajax:success", function()
alert("a date has changed")
);
// or: $('.event_data .best_in_place').bind(...)    

来自official readme：

成功时触发 'ajax:success' 事件。

使用绑定：

$('.best_in_place').bind("ajax:success", function ()
$(this).closest('tr').effect('highlight'); );

要绑定特定于特定字段的回调，请使用 辅助方法中的“类”选项，然后绑定到该类。

<%= best_in_place @user, :name, :classes => 'highlight_on_success' %>
<%= best_in_place @user, :mail, :classes => 'bounce_on_success' %>

$('.highlight_on_success').bind("ajax:success", function()bip_date);
$('.bounce_on_success').bind("ajax:success", function()$(this).closest('tr').effect('bounce')););

【参考方案2】：

好吧，看看源代码，似乎 best_in_place 正确触发了 loadSuccessCallback 中的 ajax:success 事件。这意味着您应该能够使用一些 jQuery 将您自己的函数绑定到更改的事件。

$(".best_in_place").live 'change', (event) ->
  alert "Hello, World!"

【讨论】：

这很好用。请务必将 jquery 的“live”方法替换为较新的“on”方法。

对，@Stone。 Karen 在她的问题中使用了 live，她没有显示我可以与 on 一起使用的父元素，而且这是一个旧答案。

完全，只是想把它放在那里以通知现在正在查看答案的任何人。顺便说一句，谢谢你的回答！