Railsy Wykonywanie JavaScriptu w Bootstrap 4 modalnym

Question

Mam aplikację Rails 5.1, w której tworzę rekord pacjenta przy użyciu Ajax w formularzu przy użyciu coffeescript/JS. Działa to dobrze, nie ma problemu stosując następujący kod:

_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 

W modalnym pacjenta Używam bootstrap-datepicker wybrać datę urodzenia, potem pisałem jakiś coffeescript obliczyć wiek i wypełnić go automatycznie, jak widać w tym kodzie poniżej w 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 

Kiedy idę, aby dodać pacjenta i modalne pożary/pokazy, mogę wypełnić pola takie jak imię itp., Ale kiedy wybiorę datę urodzenia za pomocą datepika i pozwolę coffeescriptowi obliczyć wiek, który pojawi się w pola, dopóki nie odrzucisz bootstrap-datepicker, wtedy wyczyści całą formę modalną, włącznie z imieniem i nazwiskiem.

Nie widzę żadnych błędów w konsoli, gdy sprawdzam i widzę, że coffeescript działa poprawnie.

Szczerze mówiąc nie jestem pewien, co to za problem, ponieważ nie jestem tak dobrze zorientowany w JavaScript/coffeescript, jak ja w Ruby. Zastanawiam się, czy jest coś, co robię źle, które powoduje, że pola wejściowe wyczyścić albo gdzieś w moim callback lub w obliczeniach się.

Każda pomoc zostanie bardzo doceniona. Przeszukałem go i przeszukano stos oraz znalazłem kilka artykułów na temat wykonywania JS w modalu i jeszcze nie osiągnąłem sukcesu dzięki temu niewielkiemu funkcjonalności.

Aktualizacja Wyłączyłem bootstrap-datepicker i ręcznie wpisałem w polu daty urodzenia i coffeescript obliczony bez kasowania całego formularza. Wygląda to jak problem z bootstrap-datepicker. Ale nie jestem pewien, gdzie leży problem.

Answer 1

Po dotarciu do pomocy poza stos, byłem wskazał https://github.com/uxsolutions/bootstrap-datepicker/issues/50#issuecomment-90855951

Więc zmieniłem kod na:

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

Podziękowania dla Jacoba M. za dodatkową parę oczu Google'a.

Answer 2

Dzieje się tak, ponieważ modal datepikarza uruchamia zdarzenie "hide.bs.modal" przy zamknięciu, które jest propagowane do ".patient-modal". Read more

Można użyć event.stopPropagation() na datepicker za modalnego imprezy

lub bardziej wyraźnie zaznaczyć formę w obsługi zdarzeń:

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