Rails3/随着输入的变化而动态地重新计算字段

Rails 3/dynamically recalcuate a field as inputs change?

本文关键字：新计算 计算 字段 动态 输入 变化 Rails3      更新时间：2023-09-26

在我看来，我有两个这样的日期字段：

<%= f.text_field :start_date %>
<%= f.text_field :end_date %>

（我使用jquery-ui-datepicker来设置日期，但为了清晰起见，省略了该代码。日期存储在数据库中，名称为"2012-03-02"。）

我用助手方法计算两个日期之间的差异，并将其显示为#duration:

<div id="duration">
    <%= time_diff_in_natural_language(@project.start_date, @project.end_date) %>
</div>

这正如预期的那样工作——它计算存储在数据库中的两个日期之间的差异。但我真的很想动态重新计算持续时间——我猜这会通过日期字段上的javascript onchange();事件来实现，该事件会触发对duration字段中内容的重新计算，但我不知道如何实现。有人能为我指出一个实现这一目标的好方法吗？

（这个问题非常相似，我认为这个答案在这里也可以，但我不知道如何正确显示时差，因为这必须参考rails辅助方法。）

一种方法是调用ajax来获取持续时间。

因此，在您的控制器中，您将定义一个名为"duration"的操作，例如，它将查找两个参数：startdate和：enddate，并简单地调用您的助手方法timediv_in_natural_language。

def duration
  time_diff_in_natural_language(params[:start_date], params[:end_date])
end

然后，您可以连接日期选择器的onSelect事件（或输入的onChange事件）来调用javascript函数，该函数只需对控制器中的"duration"操作进行ajax调用，并在成功时设置#duration。类似这样的东西：

function get_duration() {
   $.ajax({
      url: '/duration',
      dataType: "json",
      type: "POST",
      data: { start_date: $("#project_start_date").val(), end_date: $("#project_end_date").val() },
      success: function(result) { $("#duration").text(result); }
      }
   });
}

以上只是您如何处理此问题的一个示例。

相关文章：