I have run into a bit of a pickle, I am using bootstrap modal along with FullCalendar.io to add appointments into an app, everything works perfectly fine on google chrome however in firefox the ajax request to add the appointment has no effect and in the console I see just a NS_BINDING_ABORTED error but nothing else.
If I place the submit button outside of the form itself, it does work however the modal is not hidden after submission so the modal stays open (in chrome too if I leave the submit button outside the form tags).
Here is the modal:
<!-- Modal: Add Appointment -->
<div class="modal fade" id="addappointment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">Create Appointment</h5>
<button type="button" class="btn-close del-ls" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="addevent" action="" method="post" class="add-form">
<?php echo $objValidation->validate('location'); ?>
<span>Location</span>
<p>
<select class="form-select" name="location_id" id="location_id">
<option disabled>Choose location</option>
<optgroup label="User location">
<?php foreach($locations as $location) { ?>
<option value="<?php echo $location['id']; ?>"
<?php echo $objForm->stickySelect('location_id', $location['id'], $userLocationId['location_id']); ?>>
<?php echo $location['name']; ?>
</option>
<?php } ?>
</optgroup>
</select>
</p>
<span>Client</span>
<p>
<select class="csc-select client_id" name="client_id" id="client_id">
<option value="">Select Client</option>
<?php foreach($clients as $client) { ?>
<option value="<?php echo $client['id']; ?>"
<?php echo $objForm->stickySelect('client_id', $client['id']); ?>>
<?php echo $client['name']; ?>
</option>
<?php } ?>
</select>
</p>
<span>Services</span>
<p>
<select multiple class="csc-select" name="service_id" id="service_id">
<?php foreach($services as $service) { ?>
<option value="<?php echo $service['id']; ?>"
<?php echo $objForm->stickySelect('service_id', $service['id']); ?>>
<?php echo $service['name']; ?>
</option>
<?php } ?>
</select>
</p>
<span>Appointment Start Date & Time</span>
<p>
<input type="datetime-local" name="start_date" id="start_date" >
</p>
<span>Appointment Ending Date & Time</span>
<p>
<input type="datetime-local" name="end_date" id="end_date" >
</p>
<span>Appointment Notes</span>
<p>
<textarea rows="4" name="a_appointment_notes" id="a_appointment_notes"></textarea>
</p>
<p>
<!-- <input type="button" name="submitApp" id="submitApp" class="blue-btn alab del-ls" value="Add Appointment"> -->
</p>
</form>
<input type="button" name="submitApp" id="submitApp" class="blue-btn alab del-ls" value="Add Appointment">
</div>
</div>
</div>
</div>
Here is the JS/Ajax:
$(function() {
//twitter bootstrap script adding new appointments
$("#submitApp").click(function(event) {
//event.preventDefault();
originalArray = $("#service_id").val();
separator = ',';
implodedArray = originalArray.join(separator);
var addAppointmentData = {
location_id: $("#location_id").val(),
client_id: $("#client_id").val(),
// service_id: $("#service_id").val(),
implodedArray,
start_date: $("#start_date").val(),
end_date: $("#end_date").val(),
a_appointment_notes: $("#a_appointment_notes").val()
};
$.ajax({
type: "POST",
url: "/src/Pages/appointment/add.php",
data: addAppointmentData,
dataType: "json",
encode: true,
}).done(function (data) {
$('#addappointment').modal('hide');
console.log(data);
calendar.refetchEvents();
location.reload();
});
});
});
So this line basically only works if the submit button is inside the form tags:
$('#addappointment').modal('hide');
But if the submit button is inside the form tag the modal hides successfully and completes the POST submission but not in firefox, does anyone have any idea how to fix this?
I was able to solve this by updating my ajax request like so:
$.ajax({
type: "POST",
url: "/src/Pages/appointment/add.php",
data: addAppointmentData,
dataType: "json",
encode: true,
cache: false,
}).then(function(data) {
console.log(data);
calendar.refetchEvents();
}).catch(function(jqXHR, textStatus, errorThrown) {
console.log(xhr.responseText);
alert('Error: Appointment was not added successfully!');
}).always(function() {
if ($('#addappointment').hasClass('show')) {
$('#addappointment').modal('hide');
}
setTimeout(function() {
location.reload();
}, 500); // Wait for 500ms before reloading the page
});