"Modal Promise Example"
Bootstrap 3.3.0 Snippet by alefrost

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"><!-- Button trigger modal --> <h2>Modal Promise Example</h2> <p>Launch the modal and click one of the buttons on the modal (or click off the modal).</p> <p>The corresponding output is shown in the console log</p> <button type="button" class="btn btn-primary btn-lg" onclick="StartPromise()"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <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">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button id="btnClose" type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button id="btnSave" type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div>
function StartPromise() { let myFirstPromise = new Promise((resolve, reject) => { // We call resolve(...) when what we were doing async succeeded, and reject(...) when it failed. // In this example, we use setTimeout(...) to simulate async code. // In reality, you will probably be using something like XHR or an HTML5 API. $("#btnSave").click(function(){resolve('yay');}); $('#myModal').on('hidden.bs.modal', function (e) { reject('boo'); }) $('#myModal').modal('show'); }); myFirstPromise.then((successMessage) => { // successMessage is whatever we passed in the resolve(...) function above. // It doesn't have to be a string, but if it is only a succeed message, it probably will be. console.log(successMessage); $('#myModal').modal('hide'); }).catch((reason) => { console.log(reason); $('#myModal').modal('hide'); }); }

Related: See More

Questions / Comments:

Is there any issue with this implementation? I am new to promises.

adityarar () - 5 years ago - Reply 0

It works how I would expect it to:

It logs "yay" in the console when you click the "Save Changes" button in the modal.

It logs "boo" if you click "Cancel" in the modal.

It logs "boo" if you click the close X in the corner of the modal.

It logs "boo" if you click off of the modal.

I've noticed if you click to view the HTML or JS portions of the snippet and go back to the Preview it will throw and error. That might just be related to how this particular snippet works in Bootsnips preview. Refreshing the page fixes it.

If you're asking about whether this is the right way to do modal popups I'd say it depends. I wrote this a long time ago, but I believe I was trying out promises because I needed a way to trigger custom code depending on what action was taken in a modal and a simple confirmation box wasn't going to cut it.

If all you need is to display a modal with information and allow the user to close the modal then this is definitely overkill. Bootstrap handles that kind of thing on its own and you don't need promises in that case.

Here's some more info on Promises in general: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

alefrost (1) - 5 years ago - Reply 1