Как реализовать flatpickr при использовании кокона в действии редактирования? - PullRequest
Новая
       23

Как реализовать flatpickr при использовании кокона в действии редактирования?

0 голосов
/ 21 октября 2019

Я использую календарь flatpickr в форме вложенного кокона. При создании новой формы все работает, как и ожидалось, но когда я хочу отредактировать существующую форму:

  • Первое поле flatpickr отображается правильно
  • Добавление нового поля flatpickr с коконом отображает правильно
  • Любое другое существующее поле flatpickr после 1-го не отображает .

edit_form 

<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>

javascript для edit_form 

<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>

1 Ответ

1 голос
/ 21 октября 2019

Поскольку вы не показываете частичное extra_guest_price_fields, я могу только догадываться, но в ваших js вы ссылаетесь на #first_date и #second_date. Это похоже на использование html-идентификаторов для повторяющихся элементов, поскольку у вас должно быть более 1 из этих пар. Предполагается, что HTML-идентификаторы существуют на странице только один раз, поэтому при использовании этого селектора он будет остановлен при первом обнаружении.

Я предлагаю вам использовать html-классы, такие как .first_date и .second_date, и соответственно настроить js, и тогда он должен работать.

...