CODEWITHSUNDEEP
javascriptjquerybootstrap-4bootstrap-modal
Roly
Roly

Reputation: 161

Page not refreshing when modal is closed/hidden

I have a modal that loads after a button is clicked. What I want is that as soon as the modal gets hidden, refresh the page. but it does not seem to work as expected and don't see my error. What's wrong in my code?

HTML:

<!DOCTYPE html>
<head>
    <!--Libreries for modal -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<body>

    <button id="btn" onclick="openM()">Click</button>

    <div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="color:black;" id="MSJ">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>                 
</body>

JS:

//refresh page when modal is hidden
$('#ModalMSJ').on('hide.bs.modal','.modal', function () {
    window.open('ModalP.php', '_self'); 
}); 

//open modal on button click
function openM() {
    $("#ModalMSJ").modal("show"); 
}

Upvotes: 0

Views: 2192

Answers (2)

Andro Font
Andro Font

Reputation: 356

Your event binding is wrong, the hide callback is not called at all. Please remove the second param '.modal' as it is not needed. Final result:

$('#ModalMSJ').on('hide.bs.modal', function () 
{   
    window.open('ModalP.php', '_self'); 
});

Upvotes: 1

Cyberboy1551
Cyberboy1551

Reputation: 343

You could try replacing:

window.open('ModalP.php', '_self');

With

location.reload();
//or
document.location.reload();

Upvotes: 1

Related Questions