Question

我似乎对jQuery UI Datepicker有一个奇怪的问题。如果它位于包含多行数据的表中，则即使用户再点击下一行，它也会更改第一行中的日期。

观点：

= form_tag bar_foo_path(@bar.id, @foo.id), id: "order-costs", method: :patch do |f|
  %table.table.table-bordered.table-select
    - @all_foos.each do |foo|
      %tr
        = fields_for "all_foos[]", foo do |p|
          %td= p.text_field :cf_date, value: formatted_date(foo.cf_date), maxlength: '10', placeholder: 'yyyy-mm-dd', class: 'save-data datepicker'

JavaScript：

$(document).ready(function() {
  $(".datepicker").datepicker({
    dateFormat: "yy-mm-dd"
  }).prop('readonly', true);
});

奇怪的是它只会影响不同的行。如果它连续有多个日期选择器，则该行中的日期选择器可正常工作。它只影响其他行中的数据。

思考？

我已经看过这个答案：

Datepicker only changes date in first row of table。这个涉及将datepicker添加到呈现页面后添加的行。

Answer 1

我已经弄明白了这个问题。将fields_for与text_field一起使用时，它将根据fields_for和text_field对象名称生成输入名称。就我而言，由于我使用了fields_for all_foos[]，因此它生成了名为all_foos__cf_date的输入。该类型的所有输入都具有该名称，而datepicker只是用该名称填充第一个输入。

我通过将all_foos[]更改为all_foos[#{foo.key}]来解决此问题。

Answer 2

你不能使用......

f.fields_for :all_foos do |p|
  p.text_field(....)

通常它应该创建像all_foos_0_cf_date, all_foos_1_cf_date

这样的输入

在多行数据中，datepicker仅更改第一行数据

2 个答案: