javascript - Add bootbox.js confirmation box to href link - Stack Overflow

admin管理员组

文章数量:1349674

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>

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>

• javascript
• jquery
• html
• css
• bootbox

Share Improve this question Follow edited Nov 9, 2016 at 18:58 John Hascall 9,41666 gold badges5151 silver badges7373 bronze badges asked Nov 9, 2016 at 17:54 rafalefighterrafalefighter 73433 gold badges1212 silver badges4141 bronze badges 5

• 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 Commented Nov 9, 2016 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 Commented Nov 9, 2016 at 18:03
• Did you also include the dependencies of bootbox, by which I mean bootstrap and jquery ? – Vanquished Wombat Commented Nov 9, 2016 at 18:05
• yes I included both of them and alert box working fine !! – rafalefighter Commented Nov 9, 2016 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. Commented Nov 10, 2016 at 20:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn./twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn./twitter-bootstrap/2.3.2/css/bootstrap-bined.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css">


<script src="https://cdnjs.cloudflare./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>

本文标签： javascriptAdd bootboxjs confirmation box to href linkStack Overflow