Question

-5

Bootstrap Modal - How to Return True if Yes Button is Clicked - Customized Confirm

rated 0 times [ 0] [ 5] / answers: 1 / hits: 18146 / 7 Years ago, thu, august 3, 2017, 12:00:00

Okay, I've spent whole day reading Q&A but still couldn't get it done. I needed to create a customized confirm() wherein instead of the default dialog, I use bootstrap modal to return true if user clicks Yes, return false for No.

Example:

<a href=remove.php?id=3 onclick=return custom_confirm('Are you sure you want to remove this?'); />

and my custom confirm function is:

function custom_confirm(message) {

  //  put message into the body of modal

  $('#modal-custom-confirmation').on('show.bs.modal', function (event) {

  //  store current modal reference

    var modal = $(this);



    //  update modal body help text

    modal.find('.modal-body #modal-help-text').text(message);

  });



  //  show modal ringer custom confirmation

  $('#modal-custom-confirmation').modal('show');



  //  if Yes button is clicked, return true

  //  if No  button is clicked,  return false

  //  logic here...

}

My modal is here:

<!--  modal: custom confirmation  -->

<div class=modal fade text-left id=modal-custom-confirmation tabindex=-1 role=dialog aria-labelledby=modal-help-title>

  <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>&times;</span></button>

        <strong class=modal-title id=modal-help-title>Confirm</strong>

      </div><!--  /.modal-header  -->

      <div class=modal-body>

        <p id=modal-help-text></p>

      </div><!--  /.modal-body  -->

      <div class=modal-footer>

        <button type=button class=btn btn-success>Yes</button>

        <button type=button class=btn btn-default data-dismiss=modal>No</button>

      </div><!--  /.modal-footer  -->

    </div><!--  /.modal-content  -->

  </div><!--  /.modal-dialog  -->

</div><!--  /.modal  -->

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jamir

Add To Favorites

Follow

Total Points: 736

Total Questions: 97

Total Answers: 101

Location: Cayman Islands

Member since Fri, Mar 4, 2022

2 Years ago

answered 7 Years ago cristinadomoniquel · Accepted Answer

Thanks for the answers and comment everyone. I've finally solved it. As suggested, I used a library called Bootbox.js and use a customized confirm with alternate button text (no need to reinvent the wheel, just tweak it to suit the need)

Then I incorporated the answers of: Nuno Reis, Fabien Ménager, and Ryan McGeary, to create the solution. Here's what I did:

Add class as identifier for links to use this custom confirmation. In my code, I used custom-confirm-link.

Put confirmation message into data bind data-confirmation.

So my link now looks like this:

<a href=remove.php?id=3 class=custom-confirm-link data-confirmation=Are you sure you want to remove this? />

In footer, I added click event listener to links with class custom-confirm-link. Inside:
- I retrieved the link triggered, its href and its confirmation message through data bind data-confirmation
- I did preventDefault() to the event
- popped a bootbox.js confirm with custom label for confirm (yes) and cancel (no),
- and utilized its callback to process the result
- Only when confirm button yes is clicked will I simulate the clicking of link through window.location.href.

That's it. Here's the click event listener code:

<script type=text/javascript>

    //  click event listener to links that requires custom confirm

    $('.custom-confirm-link').click(function(e){



        //  get link and its confirmation message

        var link                = $(this);

        var confirmationmessage = link.data('confirmation');

        var address             = link.attr('href');



        e.preventDefault();



        bootbox.confirm({

            title   : 'Confirm',

            message : confirmationmessage,

            buttons : {

                confirm : {

                    label : 'Yes',

                    className: 'btn-success'

                },

                cancel : {

                    label : 'No',

                    className : 'btn-danger'

                }

            },

            callback : function (result) {

                if (result)

                {

                    //  simulate click the link

                    window.location.href = address;

                }

            }

        });

    });

</script>