Donate

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.
$("#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');
  }
 });
});
After doing some research, the solution that worked for me is to trigger the click button inside the modal header div element.
<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">&times;</button>
    <h5>Add Invoice Data</h5>
   </div>
   <div class="modal-body">
   </div>
   <div class="modal-footer">
   </div>
  </div>
 </div>
</div>
Updated JavaScript Code that triggers the button click event.
$("#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

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

TypeScript Error Or Bug: The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program.

Invalid nested tag div found, expected closing tag input