Rails Ausführen von Javascript in Bootstrap 4 modal

Question

Ich habe eine Rails 5.1-Anwendung, wo ich eine Patientenakte mit Ajax innerhalb eines Formulars mit Coffeescript/JS erstellen. Das funktioniert gut, kein Problem mit dem folgenden Code:

_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 

Bei dem Patienten modal Bootstrap-Datepicker Ich verwende ein Geburtsdatum zu wählen, dann schrieb ich einige Coffeescript, das Alter zu berechnen und sie automatisch zu füllen, wie in diesem Code unten in 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 

gesehen

Wenn ich einen Patienten hinzufüge und das Modal feuert/auftaucht, kann ich die Felder wie Name usw. ausfüllen, aber wenn ich das Geburtsdatum mit dem Datumswahlpunkt wähle und das Coffeescript das Alter berechnen lasse, wird es angezeigt die Felder, bis ich den bootstrap-datepicker ablehne, dann wird es das gesamte modale Formular einschließlich des Vor- und Nachnamens löschen.

Ich sehe keine Fehler in der Konsole, wenn ich inspiziere, und ich sehe das coffeescript korrekt ausgeführt.

Ich bin ehrlich gesagt nicht sicher, was das Problem damit ist, wie ich in Javascript/coffeescript nicht so versiert bin, wie ich in Ruby bin. Ich habe mich gefragt, ob etwas, das ich falsch mache, dazu führt, dass die Eingabefelder irgendwo in meinem Callback oder in der Berechnung selbst gelöscht werden.

Jede Hilfe würde sehr geschätzt werden. Ich habe den Stack gegoogelt und durchsucht und ein paar Artikel über das Ausführen von JS in einem Modal gefunden und muss noch Erfolg mit dieser kleinen Funktion haben.

Update Ich deaktivierte den Bootstrap-Datepicker und nur manuell eingegeben das Geburtsdatum Feld und die coffeescript berechnet, ohne das gesamte Formular zu löschen. Es sieht also so aus, als wäre es ein Problem mit dem Bootstrap-Datepicker. Aber ich bin mir nicht sicher, wo das Problem liegt.

Answer 1

Nach außerhalb des Stapels um Hilfe zu erreichen, war ich zu https://github.com/uxsolutions/bootstrap-datepicker/issues/50#issuecomment-90855951 zeige

Also änderte ich meinen Code zu diesem:

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

Danke an Jacob M. für das zusätzliche Paar Google-Augen.

Answer 2

Dies liegt daran, dass das Modal des Datepickers das Ereignis 'hide.bs.modal' beim Schließen auslöst, das sich auf '.patient-modal' ausdehnt. Read more

Sie modal Ereignis event.stopPropagation() auf den picker des

oder mehr explizit auswählen Form im Ereignishandler verwenden können:

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