Работает только первый datetimepicker

0

Только первая форма datetimepicker работает правильно. Все последующие не позволяют пользователю выбирать другую дату (т.е. кнопка не изменяется и значение не изменяется в текстовом поле), или пользователь может изменить месяц, хотя ползунки времени работают нормально во всех случаях. Любая помощь в том, почему это может быть неудачным, будет с благодарностью. Благодарю!

Modal с datetimepicker как одно поле в форме:

<div id="edit_time_modal_<%= order.id %>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="edit_order_modal_label" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel"><%= order.name %></h3>
  </div>
  <div class="modal-body pt0 pb10">
    <%= form_tag update_order_time_url(order_id: order.id), method: "patch", remote: true do %>
      <%= text_field_tag :order_start_date_time, order.order_start_date_time.strftime("%Y-%m-%d %H:%M:%S"), class: "edit-order-datetime", placeholder: "Start date & time" %>
...
  </div>
  <div class="modal-footer">
    <%= button_tag '<i class="fa fa-list-alt"></i> Update Order'.html_safe, class: "btn btn-primary" %>
    <button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i> Close</button>
    <% end %>
  </div>
</div>
<script>
  $('.edit-order-datetime').datetimepicker({dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm:ss', showSecond: false, stepMinute: 15 });
</script>

Где модаль визуализируется и вызывается из:

<tbody id="dashboard_orders_table">
  <% @todays_orders.each do |order| %>
    <tr id="dashboard_order_row_<%= order.id %>">
      <td><a href="#edit_time_modal_<%= order.id %>" role="button" class="modalbutton" data-toggle="modal"><%= order.order_start_date_time.strftime("%l:%M") %></a></td>
      <%= render 'edit_time', order: order %>
...
    </tr>
  <% end %>
</tbody>
  • 0
    Таким образом, существует несколько модальных полей, содержащих поле даты, а не несколько полей даты в этой одной форме / модале. Верный?
  • 0
    В таблице есть несколько строк «заказов», каждый заказ имеет свои модальные и форму для обновления даты и времени заказа, но только первая в таблице работает правильно
Теги:
datetimepicker

3 ответа

1
Лучший ответ

У вас будет несколько ярлыков с идентификатором myModalLabel если у вас есть несколько заказов /edit_time. Измените это на класс и посмотрите, разрешают ли селекторы события на последующих входах.

Также убедитесь, что каждая форма имеет уникальный набор id.

  • 0
    $ (function () {$ ('# edit_order_datetime _ <% = order.id%>'). datetimepicker ({dateFormat: 'yy-mm-dd', timeFormat: 'ЧЧ: мм: сс', showSecond: false, stepMinute : 15});});
0

Я дал каждой форме и datetime введите свой собственный уникальный идентификатор и вставил ruby в js, чтобы вызвать datetimepicker для каждого уникального ввода datetime: $ (function() {$ ('# edit_order_datetime _ <% = order.id%>'). Datetimepicker ( {dateFormat: 'yy-mm-dd', timeFormat: 'HH: mm: ss', showSecond: false, stepMinute: 15});});

<%= form_tag update_order_time_url(order_id: order.id), method: "patch", remote: true, id: "edit_time_#{order.id}" do %>
  <%= text_field_tag :order_start_date_time, order.order_start_date_time.strftime("%Y-%m-%d %H:%M:%S"), class: "edit-order-datetime", id: "edit_order_datetime_#{order.id}", placeholder: "Start date & time" %>
...
<% end %>
0

Несколько причин для устранения неполадок:

  1. Убедитесь, что все поля даты используют один класс edit-order-datetime.
  2. Убедитесь, что все модалы загружены в DOM до выполнения JavaScript. Попробуйте использовать jQuery $.ready(). Как это:

    $(function() {
        $('.edit-order-datetime').datetimepicker({dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm:ss', showSecond: false, stepMinute: 15 });
    });
    

Если модальности визуализируются на ходу (т.е. Когда нажата строка), а не когда DOM сначала загружается, вам нужно будет вызывать $.datepicker каждый раз, когда модаль отображается.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню