In my Rails 5 app I've got a registration form where user is able to chose registration_type from dropdown list. When selects the Caregiver option, an additional field is shown on the form - it's handled by below registrant.js file:
$(document).on('focusout change', "#registrant_registration_attributes_registered_as", toggle_caregiver_fields_on_ready);
function toggle_caregiver_fields_on_ready(){
var caregiverSectionElement = $("#registrant_registration_attributes_registrant_id"),
register_as = $("#registrant_registration_attributes_registered_as"),
caregiver = (register_as.val() == 'caregiver');
if (caregiver) {
$('.patient-caregiver-section').removeClass('hidden');
$('#patient-search-results').removeClass('hidden');
} else {
$('.patient-caregiver-section').addClass('hidden');
$('#patient-search-results').addClass('hidden');
}
}
It works pretty well until the form throws an error which causes render :new from the controller create action, like below:
registrants_controller.rb
def create
@registrant = Registrant.new(parse_post_params)
if @registrant.save!
#some logic (...)
@registrant.add_special_status_to_history(current_login.user)
@caregiver_patient.save! if @patient.present?
redirect_to registrant_path(@registrant), notice: 'Registrant Added'
else
render :new
end
end
After the :new page was rendered, the JS file didn't seem to work - in chrome console I dropdown is selected:
<select class="form-control required" aria-required="true" name="registrant[registration_attributes][registered_as]" id="registrant_registration_attributes_registered_as"><option value="">
Please select
</option>
<option selected="selected" value="caregiver">Caregiver</option>
<option value="patient">Patient</option></select>
But the class patient-caregiver-section still has a hidden value:
<div class="patient-caregiver-section hidden">
<div id="add-patient">
<div class="form-group"><label class="non-bold-label pull-left" for="registrant_registration_attributes_patient_to_caregiver">
Patient Added to Caregiver
</label>
</div>
</div>
</div>
How to force JS file to remove this class also when new action was rendered?