CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
AgainMe
AgainMe

Reputation: 780

Wait value in bootstrap confirm modal?

The question seems stupid, but I can't figure out how to wait the confirmation button for return a value. Javascript is based on single thread so I need to know how can I set something like a callback function until a button pression, this is the structure of the dialog:

<div class="modal fade" id="confirmation" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Confirm</h4>
            </div>
            <div class="modal-body">
                <label>Are you sure?</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-ok" data-dismiss="modal">Continue</button>
                <a class="btn btn-danger" data-dismiss="modal">Cancel
                </a>
            </div>
        </div>
    </div>
</div>

<button id="go">press me</button>

and js:

$(document).ready(function()
{
    $('#go').click(function()
    {
        $('#confirmation').modal('show');
        //if the user has pressed the .btn-ok button then an alert appear
        alert(true);
    })
});

In practice when the user press the button a bootstrap dialog appear, I need to display an alert only if the user press the Continue button .bnt-ok, but actually I can't understood how to do this. Someone could show me how? Thanks.

JSFIDDLE

UPDATE

1 User fire an event and function one is executed:

one: function()
{
    if(two()) //if function two return true then show alert
    {
        alert(true);
    }
}

2 The function two show the bootstrap dialog:

 two: function()
 {
    $('#confirmation').show();

   //here I need to check if the user has pressed btn-ok, if yes,
   //I need to return true, otherwise false

   return true;
 }

3 The problem's come in the function two, 'cause there is no way to stop the function until the user button click. So the confirmation dialog is displayed but the function return true. How can I wait the user click?

Upvotes: 3

Views: 14554

Answers (2)

Sergey Orlov
Sergey Orlov

Reputation: 509

I understand this problem well. Pure Typescript solution looks like this:

const result: boolean = confirm(message);
                if (result == true) {
                    return ConfirmationResult.ConfirmationResultPositive;
                } else {
                    return ConfirmationResult.ConfirmationResultNegative;
                }

where ConfirmationResult.ConfirmationResultPositive is some enum. The deal is confirm function shows standard js window and waits the user result (blocks further execution). Unfortunately bootstrap does not have this standard functionality. For example, WinForms, WPF and UMP (clear async) has the same standard behaviour. I also suppose that with Promise<> we can workaround it with bootstrap modal.

Upvotes: -3

Adam Wolski
Adam Wolski

Reputation: 5666

Simply, attach a click handler to the .btn-ok element.

As such:

$('.btn-ok').click(function(){
   alert(true);
});

jsFiddle

EDIT:

Check out solution to your problem using ES6 promises. 

const modal = new Promise(function(resolve, reject){
       $('#confirmation').modal('show');
       $('#confirmation .btn-ok').click(function(){
           resolve("user clicked");
       });
       $('#confirmation .btn-danger').click(function(){
           reject("user clicked cancel");
       });
      }).then(function(val){
        //val is your returned value. argument called with resolve.
        alert(val);
      }).catch(function(err){
        //user clicked cancel
        console.log("user clicked cancel", err)
      });

Updated jsFiddle. Note, that it is using ES6 promises, and you should check browser support or transpile your code (using babel for example).

Upvotes: 9

Related Questions