Rails Thực thi Javascript trong Bootstrap 4 phương thức

Question

Tôi có ứng dụng Rails 5.1 nơi tôi tạo bản ghi bệnh nhân bằng Ajax bên trong biểu mẫu bằng coffeescript/JS. Đây hoạt động tốt không có vấn đề bằng cách sử dụng đoạn mã sau:

_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 

Trong phương thức kiên nhẫn Tôi đang sử dụng bootstrap-datepicker để chọn một ngày tháng năm sinh, sau đó tôi đã viết một số coffeescript để tính toán tuổi và cư nó tự động như đã thấy trong mã này dưới đây trong 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 

Khi tôi đi thêm bệnh nhân và cháy theo phương thức/hiển thị tôi có thể điền vào các trường như tên, v.v. nhưng khi tôi chọn ngày sinh bằng cách sử dụng datepicker và để coffeescript tính tuổi nó sẽ hiển thị các trường cho đến khi tôi loại bỏ bootstrap-datepicker, sau đó nó sẽ xóa toàn bộ biểu mẫu phương thức bao gồm cả họ và tên.

Tôi không thấy lỗi nào trong bảng điều khiển khi tôi kiểm tra và tôi thấy việc thực thi coffeescript đúng cách.

Tôi thành thật không chắc chắn vấn đề là gì với điều này vì tôi không thông thạo Javascript/coffeescript như tôi đang ở trong Ruby. Tôi đã tự hỏi nếu có một cái gì đó tôi đang làm sai đó là gây ra các lĩnh vực đầu vào để xóa một nơi nào đó trong gọi lại của tôi hoặc trong bản thân tính toán.

Mọi trợ giúp sẽ được đánh giá cao. Tôi đã googled và tìm kiếm stack và tìm thấy một vài bài viết về việc thực thi JS bên trong một phương thức và chưa thành công với phần chức năng nhỏ này.

Cập nhật Tôi tắt trình khởi động ngày tháng và chỉ nhập theo cách thủ công vào ngày tháng năm sinh và coffeescript được tính toán mà không xóa toàn bộ biểu mẫu. Vì vậy, nó trông giống như một số vấn đề với bootstrap-datepicker. Nhưng tôi không chắc vấn đề nằm ở đâu.

Answer 1

Sau khi vươn ra sự giúp đỡ bên ngoài của Stack, tôi đã chỉ vào https://github.com/uxsolutions/bootstrap-datepicker/issues/50#issuecomment-90855951

Vì vậy, tôi đã thay đổi mã của mình thành:

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

Cảm ơn Jacob M. vì đôi mắt Google bổ sung.

Answer 2

Điều này là do phương thức của trình đặt ngày tháng kích hoạt sự kiện 'hide.bs.modal' khi đóng, điều này sẽ được gửi đến '.patient-modal'. Read more

Bạn có thể sử dụng event.stopPropagation() về sự kiện modal của datepicker

hoặc rõ ràng hơn chọn hình thức trong xử lý sự kiện:

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