Rails 在 Bootstrap 4 模式中执行 Javascript

Question

我有一个 Rails 5.1 应用程序，我在其中使用 Ajax 在使用 coffeescript/JS 的表单内创建患者记录。使用以下代码可以正常工作：

_form.html.erb

<div class="modal fade patient-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="mySmallModalLabel">Add Patient</h4>
      </div>
      <div class="modal-body">
        <%= form_for Patient.new do |f| %>
          <div class="form-group">
            <%= f.label :first_name %>
            <%= f.text_field :first_name, class: "form-control" %>
            <%= f.label :last_name %>
            <%= f.text_field :last_name, class: "form-control" %>
            <%= f.label :date_of_birth %>
            <%= f.text_field :date_of_birth, class: "form-control", id: 'patient_dob_modal', placeholder: 'yyyy-mm-dd' %>
            <%= f.label :age %>
            <%= f.text_field :age, class: "form-control", id: 'patient_age_modal' %>
            <%= f.label :sex %>
            <%= f.text_field :sex %>
          </div>
          <div class="form-group">
            <%= f.submit class: "btn btn-sm btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

application.js

$(document).on('turbolinks:load', function() {
  $('#patient_date_of_birth_modal').datepicker({
    format: 'yyyy-mm-dd',
    zIndexOffset: 100000,
    forceParse: false
  });
});

患者.咖啡

$(document).on 'turbolinks:load', ->
  selectizeCallback = null
  $('.patient-modal').on 'hide.bs.modal', (e) ->
    if selectizeCallback != null
      selectizeCallback()
      selectizeCallback = null
    $('#new_patient').trigger 'reset'
    $.rails.enableFormElements $('#new_patient')
    return
  $('#new_patient').on 'submit', (e) ->
    e.preventDefault()
    $.ajax
      method: 'POST'
      url: $(this).attr('action')
      data: $(this).serialize()
      success: (response) ->
        selectizeCallback
          value: response.id
          text: response.first_name
        selectizeCallback = null
        $('.patient-modal').modal 'toggle'
        return
    return
  $('.patient').selectize create: (input, callback) ->
    selectizeCallback = callback
    $('.patient-modal').modal()
    $('#patient_first_name').val input
    return
  return

在患者模式中，我使用 bootstrap-datepicker 来选择出生日期，然后我编写了一些咖啡脚本来计算年龄并自动填充它，如下面的代码所示 patients.coffee

$(document).on 'turbolinks:load', ->
  getAge = (dateString) ->
    today = new Date
    birthDate = new Date(dateString)
    age = today.getFullYear() - birthDate.getFullYear()
    m = today.getMonth() - birthDate.getMonth()
    if m < 0 or m == 0 and today.getDate() < birthDate.getDate()
      age--
    age

  $('#patient_dob_modal').on 'change', ->
    date = $(this).val()
    age = getAge(date)
    $('#patient_age_modal').val age
    return
  return

当我去添加一个病人并且模式触发/显示时，我可以填写姓名等字段，但是当我使用日期选择器选择出生日期并让咖啡脚本计算它会显示的年龄时在字段中，直到我关闭 bootstrap-datepicker，然后它将清除整个模式表单，包括名字和姓氏。

当我检查时，我在控制台中没有看到任何错误，并且确实看到咖啡脚本正常执行。

老实说，我不确定这是什么问题，因为我不像 Ruby 那样精通 Javascript/coffeescript。我想知道是否有什么我做错了导致输入字段在我的回调或计算本身的某处被清除。

任何帮助将不胜感激。我用谷歌搜索并搜索了堆栈，发现了几篇关于在模态中执行 JS 的文章，但还没有成功使用这一小块功能。

更新我禁用了 bootstrap-datepicker，只是手动输入了出生日期字段并计算出了咖啡脚本，而没有清除整个表单。所以它看起来像是 bootstrap-datepicker 的一些问题。但我不确定问题出在哪里。

Answer 1

在 Stack 之外寻求帮助后，我被指向 https://github.com/uxsolutions/bootstrap-datepicker/issues/50#issuecomment-90855951

所以我将代码更改为：

$(document).on('turbolinks:load', function() {
  $('#patient_date_of_birth_modal').datepicker({
    format: 'yyyy-mm-dd'
  }).on('hide', function(event) {
    event.preventDefault();
    event.stopPropagation();
  });
});

感谢 Jacob M. 为 Google 提供了一双额外的眼睛。

Answer 2

这是因为 datepicker 的模式在关闭时会触发“hide.bs.modal”事件，该事件会传播到“.patient-modal”。 Read more

您可以在日期选择器的模态事件中使用event.stopPropagation()

或更明确地在事件处理程序中选择表单：

$form = $(e.target).find('#new_patient')
$form.trigger 'reset' if $form