Closing Bootstrap Modal form after a Successful Ajax Request

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">&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>

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');
};