Bootstrap Modal Hide Not Working On Form Submit In ASP.NET MVC
Good afternoon!
I'm working on a ASP.NET MVC which uses the oldest version of Bootstrap which 3.0. Normally when working with modals, the hide() function works if using updated versions of the Bootstrap given the code below. The snippet should close the modal after a form has been submitted but this doesn't work as expected when working with the oldest version.
After doing some research, the solution that worked for me is to trigger the click button inside the modal header div element.
Updated JavaScript Code that triggers the button click event.
I'm working on a ASP.NET MVC which uses the oldest version of Bootstrap which 3.0. Normally when working with modals, the hide() function works if using updated versions of the Bootstrap given the code below. The snippet should close the modal after a form has been submitted but this doesn't work as expected when working with the oldest version.
$("#modal-add").on("submit", "#form-add", function (e) { e.preventDefault(); var form = $(this); $.ajax({ url: form.attr("action"), method: form.attr("method"), data: form.serialize(), success: function (data) { $("#modal-add").modal('hide'); //close modal function $("#tblEmployee").bootstrapTable('load', data); showAlert('Saving of record successful!', 'success'); }, error: function (er) { showAlert('Error saving record. Please try again later.', 'danger'); } }); });
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content contentStyle"> <div class="modal-header modalHeaderStyle"> <button type="button" class="close" data-dismiss="modal">×</button> <h5>Add Invoice Data</h5> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div>
$("#modal-add").on("submit", "#form-add", function (e) { e.preventDefault(); var form = $(this); $.ajax({ url: form.attr("action"), method: form.attr("method"), data: form.serialize(), success: function (data) { $('.close').click(); //close modal function $("#tblEmployee").bootstrapTable('load', data); showAlert('Saving of record successful!', 'success'); }, error: function (er) { showAlert('Error saving record. Please try again later.', 'danger'); } }); });
Comments
Post a Comment