javascript - 在编辑操作中使用cocoon时如何实现flatpickr？

Question

我正在以嵌套茧形式使用 flatpickr 日历。创建新表单时，一切都按预期运行，但当我想编辑现有表单时:

• 第一个 flatpickr 字段正确渲染
• 添加新的 flatpickr 字段并正确渲染 cocoon
• 第一个字段之后的所有其他现有 flatpickr 字段都不会呈现。

编辑表单

<div class="form-container col col-sm-6 col-lg-12">
  <%= simple_form_for [@accommodation_category, @extra_guest] do |f|%>
  <div class="options-form">

  <div class="options-form-item">
  <h4 class="p-3">Price for guest per period:</h4 class="m-3">
    <%= f.simple_fields_for :extra_guest_prices do |price| %>
    <div class="reservation-details">
      <%= render 'extra_guest_price_fields', f: price %>
    </div>
    <% end %>

    <div>
      <%= link_to_add_association f, :extra_guest_prices do %>
      <div class="option-add-option-price">
        <div class="prices-border">
          <i class="fas fa-plus"></i> Add another period
        </div>
      </div>
      <% end %>
    </div>

    <div class="row">
      <div class="col col-sm-6"> <%= f.button :submit, "Save new option", class: "create-reservation-btn"%>
      </div>
    </div>
    <% end %>
  </div>

</div>
</div>
</div>

edit_form 的 JavaScript

<script>
  $(document).ready(function(){
    const startDateInput = $(document).find("#first_date")
    const endDateInput = $(document).find("#second_date")

    if (startDateInput && endDateInput) {
    flatpickr(startDateInput, {
      format: "d-m-Y",
      altFormat: "d-m-Y",
      altInput: true,
    onChange: function(selectedDates, selectedDate) {
      if (selectedDate === '') {
        endDateInput.disabled = true;
      }
      let minDate = selectedDates[0];
      minDate.setDate(minDate.getDate() + 1);
      endDateCalendar.set('minDate', minDate);
      endDateInput.disabled = false;
    }
  });
    const endDateCalendar =
    flatpickr(endDateInput, {
      format: "d-m-Y",
      altFormat: "d-m-Y",
      altInput: true,
      },
      );
  };
});
</script>

extra_guest_price_fields

  <div class="nested-fields border-bottom">
    <div class="row">
      <div class="col col-sm-6"><%= f.input :price, placeholder: "e.g. 12.99" %></div>
      <div class="col col-sm-6"><%= f.input :weekend_extra, placeholder: "Price on top of normal price"  %></div>
    </div>

    <div class="row">
      <div class="col col-sm-6"><%= f.input :start_date,
          as: :string,
          label:"Start date",
          placeholder: "From",
          wrapper_html: { class: "inline_field_wrapper" },
          input_html:{ id: "first_date"} %></div>
      <div class="col col-sm-6"><%= f.input :end_date,
          as: :string,
          label:"End date",
          placeholder: "to",
          wrapper_html: { class: "inline_field_wrapper" },
          input_html:{ id: "second_date"} %></div>
    </div>

    <div class="col col-sm-6 option-price-delete">
      <%= link_to_remove_association f do %>
      <i class="fas fa-trash"> Delete price</i>
      <% end %>
    </div>
</div>


<script>
  $(document).on('cocoon:after-insert', function(e, added_guest_price_form){


  const startDateInput = $(added_guest_price_form.find("#first_date"))
  const endDateInput = $(added_guest_price_form.find("#second_date"))

  if (startDateInput && endDateInput) {

    flatpickr(startDateInput, {
      format: "d-m-Y",
      altFormat: "d-m-Y",
      altInput: true,

    onChange: function(selectedDates, selectedDate) {
      if (selectedDate === '') {
        endDateInput.disabled = true;
      }
      let minDate = selectedDates[0];
      minDate.setDate(minDate.getDate() + 1);
      endDateCalendar.set('minDate', minDate);
      endDateInput.disabled = false;
    }
  });
    const endDateCalendar =
      flatpickr(endDateInput, {
        format: "d-m-Y",
        altFormat: "d-m-Y",
        altInput: true,
        },
      );
};
  });
</script>

Answer 1

由于您没有显示部分extra_guest_price_fields，我只能猜测，但在您的js中，您引用了#first_date和#second_date。这听起来像是使用 html-ids 来重复元素，因为您必然有超过 1 个这样的元素对。 HTML id 应该在页面上仅存在一次，因此使用该选择器它将在第一次找到时停止。

我建议你使用 html 类，如 .first_date 和 .second_date 并相应地调整你的 js，然后它应该可以工作。