Только первая форма 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>
У вас будет несколько ярлыков с идентификатором myModalLabel
если у вас есть несколько заказов /edit_time. Измените это на класс и посмотрите, разрешают ли селекторы события на последующих входах.
Также убедитесь, что каждая форма имеет уникальный набор id
.
Я дал каждой форме и 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 %>
Несколько причин для устранения неполадок:
edit-order-datetime
.Убедитесь, что все модалы загружены в DOM до выполнения JavaScript. Попробуйте использовать jQuery $.ready(). Как это:
$(function() {
$('.edit-order-datetime').datetimepicker({dateFormat: 'yy-mm-dd', timeFormat: 'HH:mm:ss', showSecond: false, stepMinute: 15 });
});
Если модальности визуализируются на ходу (т.е. Когда нажата строка), а не когда DOM сначала загружается, вам нужно будет вызывать $.datepicker каждый раз, когда модаль отображается.