I am having a web app using bootstrap 3, datatables, js and php.
I am facing two issues:
a) When i press SAVE button on modal, it sometimes taking more seconds to load the code. This has a result, that users press again SAVE button. The result is that the app is getting duclicate answer(row in the database).
b) When modal is load, user can see for 1 second data from previous open row.
I want to fix this two issues.
I am posting a part of the modal and js. As my modal has 15 input/select fields.
My html code(.php) of the page:
<div class="modal fade" id="update_appointment" tabindex="-4" role="dialog" aria-label="UpdateAppointmentModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-customer" 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>
<h5 class="modal-title">View Appointment</h5>
</div>
<form method="POST" id="UpdateAppointmentForm" enctype="multipart/form-data">
<div class="modal-body">
<div class="row" id="UpdateAppointmentFormdiv">
<div class="col-xs-12">
<div class="form-group row">
<label for="upd_app_date" class="col-xs-2 col-form-label">Date:</label>
<div class="col-xs-2 form-group">
<input id="upd_app_date" name="app_date" type="text" class="form-control date"/>
</div>
</div>
<div class="form-group row">
<label for="upd_work_id" class="col-xs-2 col-form-label">Work:</label>
<div class="col-xs-5 form-group">
<select id="upd_work_id" name="work_id" class="form-control">
<option value="">Please Select</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="upd_app_price" class="col-xs-2 col-form-label">Price:</label>
<div class="col-xs-2 form-group">
<input id="upd_app_price" name="app_price" type="text" class="form-control price" value=""/>
</div>
</div>
<div class="form-group row">
<label for="upd_app_paid_to" class="col-xs-2 col-form-label">Paid To:</label>
<div class="col-xs-3 form-group">
<select id="upd_app_paid_to" name="app_paid_to" class="form-control">
<option value="">Please Select</option>
<option value="0">Bill</option>
<option value="1">John</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" id="UpdateAppointmentFormloader" style="display:none;">
<div class="col-xs-12 text-center">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
My js code of the modal submit button:
$('#UpdateAppointmentForm').submit(function(event) {
event.preventDefault(); //prevent default action
upd_app_date = $('#upd_app_date').val();
if (isValidDate(upd_app_date) === false) {
alert("Appointment date is not valid.");
return false;
}
if ($('#upd_work_id').val() != "") {
upd_work = $('#upd_work_id option:selected').html();
} else {
upd_work = "";
}
if ($('#upd_app_paid_to').val() != "") {
upd_app_paid_to = $('#upd_app_paid_to option:selected').html();
} else {
upd_app_paid_to = "";
}
html = '<td>' + $('#upd_app_date').val() + '</td>';
html += '<td>' + upd_work + '</td>';
html += '<td class="text-right">' + $('#upd_app_price').val() + '</td>';
html += '<td class="text-center">' + upd_app_paid_to + '</td>';
html += '<td class=" text-center">';
html += '<button type="button" class="btn btn-primary btn-sm same_button_td" onclick="viewAppoitment(\'' + $('#upd_app_id').val() + '\')"><i class="fa fa-eye" aria-hidden="true"></i></button> <button type="button" class="btn btn-success btn-sm same_button_td" onclick="editAppoitment(\'' + $('#upd_app_id').val() + '\', $(this))"><i class="fa fa-pencil" aria-hidden="true"></i></button></td>';
app_paid_to = $('#upd_app_paid_to').val();
if (app_paid_to != "") {
if (price_paid.length == 0) {
alert("Price Paid cannot be blank.");
return false;
}
if (payment_id == "") {
alert("Select Payment");
return false;
}
if (receipt_id == "") {
alert("Select Receipt");
return false;
}
}
var form_data = $("#UpdateAppointmentForm").serialize(); //Encode form elements for submission
$('#UpdateAppointmentFormdiv').hide();
$('#UpdateAppointmentFormloader').show();
$.ajax({
url: "api/customer.php?action=UpdateAppointment",
type: "POST",
data: form_data,
dataType: 'json',
success: function(result) {
if (result.success == true) {
$ele.parent().parent().html(html);
html = '<div class="alert alert-success alert-dismissible" role="alert">' + result.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>';
$('#appalertmsg').html(html);
$('#appalert').slideDown();
$('#UpdateAppointmentForm')[0].reset();
$('#UpdateAppointmentFormdiv').show();
$('#UpdateAppointmentFormloader').hide();
$('#update_appointment').modal('hide');
} else {
html = '<div class="alert alert-warning alert-dismissible" role="alert">' + result.message + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>';
$('#appalertmsg').html(html);
$('#appalert').slideDown();
$('#UpdateAppointmentFormdiv').show();
$('#UpdateAppointmentFormloader').hide();
}
}
});
});
Solution for my A problem.
If i put after event.preventDefault(); this lines:
$('#UpdateAppointmentFormdiv').hide();
$('#UpdateAppointmentFormloader').show();
will it fix my issue.
Solution for my B problem. I tried to use the following:
$('#update_appointment').on('hidden.bs.modal', function(){
$('#upd_app_date').val('');
$('#upd_work_id').val('');
$('#upd_app_price').val('');
$('#upd_app_paid_to').val('');
});
but with no success. Maybe i am having a small typo error in my code.
