Closing Bootstrap Modal form after a Successful Ajax Request - ajax

Question

My modal form successfully makes an Ajax request. The data received is displayed in the background. Invoking the modal is done by data-* attributes as bootstrap examples show here. But the modal is not getting dismissed. I tried to add
OnSuccess = "$('#searchForm').modal('hide');"
to my Ajax.BeginForm. But this doesn't remove the fade effect that modal cast on the background.
My View is:
<div class="modal fade" id="searchForm" tabindex="-1" role="dialog" aria-labelledby="searchFormLabel">
<div class="modal-dialog" 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>
<h4 class="modal-title" id="searchFormLabel">Search Here</h4>
</div>
<div class="modal-body">
#using (Ajax.BeginForm(new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "results",
OnSuccess = "$('#searchForm').modal('hide');"
}))
{
// input fields and submit button are here
}
</div>
</div>
</div>
</div>
Am I missing something?

Answer 1

In this case, you are opening up the modal via data-attributes, and then closing it using jQuery. So, in a way both modal toggling methods are used, which are conflicting with each other. So, remove the data-attributes and show/hide the modal using jQuery only.
Try this:
$('#searchForm').modal('show'); //for showing the modal
For hiding on OnSuccess:
OnSuccess = "unloadModal"
Function unloadModal will be:
function unloadModal() {
$('#searchForm').modal('hide');
};

Answer 2

My scenario: Providing content of Bootstrap modal through MVC partial view and using Ajax POST-call in it.
What solved my case with automatically closing the modal after ajax-call is completed is a little "combo" of calls in the OnComplete/OnSuccess handler function:
function onAjaxCompleted()
{
$('#searchForm.close').click();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
Hope this might help you as well.