Bootstrap Modal and Jquery Address ajax redirection timing issue

Question

I have a web app which is using the ajax for loading the main content of the page. I am using jquery address to handle the navigation with ajax. I have a form which shows up in the modal and on successful submission, I want to redirect the user to a new page. Here's the code:

//called when form is submitted
$('#modal-form').on('submit', 'form', function (e) {
    e.preventDefault();
    var url = $(this).attr('action');
    var data = $(this).serialize();
    var method = $(this).attr('method');
    $.ajax({
        url: url,
        data: data,
        dataType: 'html',
        method: method
    }).fail(function (xhr, status, err) {
        // Check for 401 unauthorized
        if (xhr.status === 401) window.location = '/auth/login/';
    }).done(function (data, status, xhr) {

        $('#modal-form').modal('hide');  //Hide the modal
        redirect(xhr);   //Redirect to a new page
    });
});

Now, the problem is before the modal is completely hidden the page redirect happens causing it to be black and inaccessible. I tried moving the redirect call into the complete function too, but doesn't seem to work. Please let me know if you need any other information.

Answer 1

You will have to use modal callback to run redirect after modal is finished:

$('#modal-form').on('hidden.bs.modal', function (e) {
    redirect(xhr);
});