Rails在Bootstrap 4模式中执行Javascript

Question

我有一个Rails 5.1应用程序,我使用coffeescript/JS在表单中使用Ajax创建患者记录.使用以下代码可以正常工作:

_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
  });
});

patients.coffee

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

在患者模式我使用的自举日期选择器选择出生日期,然后我写了一些CoffeeScript的计算年龄和自动填充它在下面这段代码中看到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

当我去添加病人和模态火灾/出现时,我可以填写姓名等字段,但是当我使用日期选择器选择出生日期时,让coffeescript计算它将显示在字段中的年龄直到我解雇bootstrap-datepicker,然后它将清除整个模态表单,包括名字和姓氏.

我在检查时看到控制台中没有错误,我确实看到coffeescript正确执行.

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

任何帮助将不胜感激.我用google搜索并搜索了堆栈,发现了一些关于在模态中执行JS的文章,并且还没有成功完成这一小部分功能.

更新我禁用了bootstrap-datepicker,只需在出生日期字段中手动输入并计算出coffeescript而不清除整个表单.所以它看起来像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 眼睛。