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