javascript - Rails : After input, 显示差异

Question

这里是 Rails 新手。

我有一个表单，用户将以表格格式输入多个结果，我希望它在移动到下一个输入时显示预期结果和输入结果之间的差异。

所以我正在寻找一些更新后触发器来触发 js/ajax，但我无法将它们放在一起。

我希望 @range1_af_ecc.required 和实际输入之间的差异显示在实际输入后的列中。

<%= form_tag update_calibration_results_customer_asset_calibration_header_calibration_results_path(@customer.id,@asset.id,@calibration_header.id), method: :put do %>
    <div class="table-responsive">
  <table class="table table-hover table-sm table-responsive-sm word-break: break-all">
    <thead>
      <tr>
        <th>Sequence</th>
        <th>Actual</th>
        <th>Difference</th>
        </tr>
    </thead>

<%  @range1_asfound_eccentricity.each  do |range1_af_ecc| %>
        <tr>
          <%= fields_for "range1_af_eccs[]", range1_af_ecc do |f| %> 
          <td><%= range1_af_ecc.sequence %></td>
          <td><%= f.number_field :actual, step: :any %></td>
          <td> DIFFERENCE TO GO HERE </td>
          <% end %>
        </tr>
      <% end %>     
    </tbody>
  </table>
  <%= submit_tag "Save" %>
 <% end %>

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 jquery blur 事件

blur 事件在元素失去焦点时调用

$(".class-of-input-where-user-enters-value").blur(function(){
  var input = $(this)
  var val = input.val()
  var row = input.parents('tr').eq(0)

  $.ajax({
    url: "/url",
    data: { value: val }

  }).done(function( response ) {
    row.find(".class-of-element-where-difference-goes").text(response)
  });

  // or you can run some JS code here to calculate difference
})