Closing a modular form after a successful Ajax bid

Question

My modal form successfully executes an Ajax request. The received data is displayed in the background. The modality is invoked using data- * attributes as examples of bootstrapping. here . But modality does not quit. I tried to add

OnSuccess = "$('#searchForm').modal('hide');" 

for my Ajax.BeginForm. But this does not eliminate the fading effect that affects the background.

My view:

 <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">&times;</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> 

Did I miss something?

Answer 1

In this case, you open modal via data-attributes , and then close it with jQuery. Thus, in a sense, modal switching methods that contradict each other are used. So, remove the data attributes and show / hide modal with jQuery only.

Try the following:

 $('#searchForm').modal('show'); //for showing the modal 

To hide OnSuccess:

 OnSuccess = "unloadModal" 

The unloadModal function will be:

 function unloadModal() { $('#searchForm').modal('hide'); }; 

Answer 2

My scenario: Providing Bootstrap content modally through partial MVC lookup and using an AJAX POST call in it. What resolved my case of automatically closing the modality after the ajax call is completed is a bit of “combo” calls in the OnComplete / OnSuccess handler function:

 function onAjaxCompleted() { $('#searchForm.close').click(); $('body').removeClass('modal-open'); $('.modal-backdrop').remove(); } 

Hope this helps you too.