gsamaras gsamaras - 3 months ago 5
Javascript Question

Call function after modal gets hidden

Edit: jsFiddle.




I am using a Bootstrap modal, and in I am doing this:

// When the button '#paramsOkay' inside '#exampleModal' is clicked..
$('#exampleModal').on('click','#paramsOkay', function (e) {
...
$("#exampleModal").modal("hide");
});

// Executes, regardless of what the user clicked 'Okay' or 'Close'
$('#exampleModal').on('hidden.bs.modal', function() {
alert("I was called");
});


How to make it to execute only when user clicks 'Okay'?




My attempt:

$('#exampleModal').on('hidden.bs.modal', '#paramsOkay', function() {
alert("I was called");
});


which doesn't get called, no matter which button is clicked...And doesn't yield an error either in console...

Answer

It doesn't execute because there is never a 'hidden.bs.modal' event fired on the button that you have delegated the listening to.

It doesn't yield an error in the console because there is nothing there that would cause an error, you're just listening for an event that isn't going to happen.

If you want to have some code execute after the modal closes if the okay button was clicked, you need to bind the close event listener inside the click event listener like so:

var $modal = $('#exampleModal');
$modal.on('click', '#paramsOkay', function(e) {
    $modal.modal("hide");
    $modal.on("hidden.bs.modal", function() {
        console.log("Make me execute ONLY when Okay is clicked, please!");
    });
});
<!--------------------------- EXTERNAL BOILER PLATE STUFF -----------------------------> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script><link rel="stylesheet" type="text/css" href="/css/result-light.css"><link rel="stylesheet" type="text/css" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css"><link rel="stylesheet" type="text/css" href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css"><script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script><script type="text/javascript" src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script><script type="text/javascript" src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>

<a id="newBtn" href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">New</a>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <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">&#215;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="url-base" class="form-control-label">Base URL (optional):</label> 
                        <input type="text" class="form-control" id="url-base" placeholder="Example: https://www.merkel.com/obama?trump=15&amp;id=9616071454&amp;hilarry=es">
                    </div>
                    <div class="form-group">
                        <label for="max-pics" class="form-control-label">Max #pics:</label>
                        <input type="text" class="form-control" id="max-pics" placeholder="Default: 7">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id="paramsOkay" type="button" class="btn btn-primary">Okay</button>
            </div>
        </div>
    </div>
</div>