CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapevents
gsamaras
gsamaras

Reputation: 73444

Execute code after modal closes if okay button clicked

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

When the Okay button is clicked, I implement some logic. When that logic has completed, I hide the modal. When the modal is hidden (the user can not see it anymore), I wish to call another function, but I wish to do so, only if the user has clicked "Okay".

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

My attempt:

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

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

JSFiddle Demo.

// 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() {
    console.log("I was called 1");
});

// Doesn't get called regardless of which button is clicked
$('#exampleModal').on('hidden.bs.modal', '#paramsOkay', function() {
    console.log("I was called 2");
});
<!--------------------------- 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>

Upvotes: 0

Views: 4624

Answers (2)

user4639281
user4639281

Reputation:

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>

Upvotes: 1

Nick Whiu
Nick Whiu

Reputation: 2440

Your code would work if it was placed inside the document load function $(function(){ ... });. However I would use jQuery's .click(..) function rather than .on(..).

// attach events in document loaded event
$(function() {
  $('#exampleModal #paramsOkay').click(function(e) {
    $("#exampleModal").modal("hide");
    alert("Okay was clicked");
  });
});

Here's a JSFiddle.

Upvotes: 0

Related Questions