Rails 3 / javascript - динамически пересчитывать поле при изменении входных данных?

Question

На мой взгляд, у меня есть два поля даты, например:

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

(я использую средство выбора даты jquery-ui для установки дат, но оставил этот код для ясности. Даты сохраненыв БД как «2012-03-02».)

И я вычисляю разницу между двумя датами с помощью вспомогательного метода и отображаю ее как #duration:

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

Этоработает как положено - он вычисляет разницу между двумя датами, хранящимися в базе данных.Но мне бы очень хотелось, чтобы длительность пересчитывалась на лету - я предполагаю, что это сработает с помощью события javascript onchange(); в полях даты, которое инициирует пересчет содержимого в поле duration, но язастрял на том, как это сделать.Может кто-нибудь указать мне хороший способ сделать это?

( Этот вопрос действительно похож, и я думаю, что ответ тоже может сработать, но я не могу понять, как отобразитьправильная разница во времени, так как это должно ссылаться на вспомогательный метод rails.)

Answer 1

Одним из подходов было бы сделать вызов ajax, чтобы получить длительность.

поэтому в вашем контроллере вы, например, определите действие с именем 'duration', которое будет искать два параметра: start_date и: end_date и просто вызовет ваш вспомогательный метод time_diff_in_natural_language. Что-то в строках:

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

Затем вы можете подключить событие onSelect ваших средств выбора даты (или событие onChange для входов), чтобы вызвать функцию javascript, которая просто вызовет 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); }
      }
   });
}

Выше приведен только пример того, как вы можете подойти к этому.