3

I'm using some href tabs to draw buttons across all the rows in an html table. When the user clicks the row button it will redirect user to another PHP script with some row values using HTML GET. But in my current implementation when user clicks the button there is no confirmation. I added the basic javascript confirmation box, but it was pretty basic and the browser asks to stop popping up alerts every time.

So, instead of using plain javascript I found library called bootbox.js that is specially designed for CSS alerts and confirmation boxes. But when I apply bootbox methods with my current jquery implementation it doesn't work!

bootbox - bootbox docs

Below is my code:

This is my href code that makes the html link

echo "<a href='approveone.php?id=$lvid&empno=$empno&ltype=$leavetype&hmd=$leavehmd&dprtmnt=$empdepartment&adminname=$adminusername' class='btn btn-success btn-xs m-r-1em confirmation' >Approve</a>";

and here is my jQuery code part that contains the bootbox call.

<script type="text/javascript">
    $('.confirmation').on('click', function () {
          return bootbox.confirm('Are you sure?');
    });
</script>
John Hascall
  • 9,176
  • 6
  • 48
  • 72
rafalefighter
  • 714
  • 2
  • 11
  • 39
  • Hi - do you actually need to get a confirmation? So the user can say yes or no? I just wanted to be sure you want bootbox.confirm rather than bootbox.alert. – Vanquished Wombat Nov 09 '16 at 18:02
  • I just want to confirm box with YES and NO button. When user click yes href should point to the external php file and when press NO nothing should happen – rafalefighter Nov 09 '16 at 18:03
  • Did you also include the dependencies of bootbox, by which I mean bootstrap and jquery ? – Vanquished Wombat Nov 09 '16 at 18:05
  • yes I included both of them and alert box working fine !! – rafalefighter Nov 09 '16 at 18:07
  • Worth pointing out that one of the reasons this wasn't working as intended is that, unlike the native dialogs, modals made with markup and CSS (like Bootstrap modals) cannot block the flow of execution. In other words, they're not drop-in replacements. This is noted in a few places in the Bootbox documentation. – Tieson T. Nov 10 '16 at 20:23

1 Answers1

10
  1. You should prevent the default behavior of clicking on the link (otherwise the browser will redirect you to that link).
  2. The confirm function should receive a callback function (that handles the result of the confirm).

Check this example:

$('.confirmation').on('click', function (e) {
  e.preventDefault();
  href = $(this).attr('href');
  return bootbox.confirm('Are you sure?', function(result) {
    if (result) {
      window.location = href
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

<a href='approveone.php?id=$lvid&empno=$empno&ltype=$leavetype&hmd=$leavehmd&dprtmnt=$empdepartment&adminname=$adminusername' class='btn btn-success btn-xs m-r-1em confirmation' >Approve</a>
Dekel
  • 60,707
  • 10
  • 101
  • 129