Rails在Bootstrap中执行Javascript 4模式

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的正确执行。

我真的不知道是什么问题，这个因为我不是在Javascript/CoffeeScript中，以及精通，因为我在Ruby中。我想知道是否有什么我做错了，这导致输入字段在我的回调或计算本身的某个地方清除。

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

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

Answer 1

伸手堆栈的外界的帮助后，我指着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

这是因为在日期选择器的模式火灾多达上接近“hide.bs.modal”事件，这是propogates达人“.patient模态”。 Read more

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

或者更明确地在事件处理程序选择形式：

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