I am working on a Rails 5.1 application where I'm implementing a patient record creation functionality using Ajax within a form using coffeescript/JS. The code I have been using for this task works seamlessly:
_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
Within the patient modal, I have incorporated bootstrap-datepicker to select a date of birth. Additionally, I have written some coffeescript to automatically calculate the age and populate it as shown below 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
While adding a patient and displaying the modal, I am able to input details such as name, etc. However, after choosing the date of birth using the datepicker and allowing the coffeescript to calculate the age, the values appear in the fields until I close the bootstrap-datepicker. Upon closing, the entire modal form, including the first and last name fields, gets cleared.
Upon inspecting, I did not come across any errors in the console, and the coffeescript seems to be functioning correctly.
Being more proficient in Ruby than in Javascript/coffeescript, I am uncertain about the issue causing the input fields to clear, whether within my callback or in the calculation itself.
I would greatly appreciate any assistance. Despite researching and browsing through Stack Overflow, I have yet to resolve this minor functionality issue.
Update Upon disabling the bootstrap-datepicker and manually entering the date of birth, the coffeescript successfully calculated the age without clearing the entire form. Therefore, it appears to be an issue with the bootstrap-datepicker. However, I am uncertain about the underlying problem causing this.