gripen fighter gripen fighter - 28 days ago 23
Javascript Question

Add bootbox.js confirmation box to href link

Im using some href tabs to draw button across all the rows in html table. when user click row button it will redirect user to another PHP script with some row values using HTML GET. but in current implementation when user click the button there is no confirmation. I added the basic javascript confirmation box but it was pretty basic and browser ask to stop poping up alert every time.

Instead of using plain javascript I found library called bootbox.js that specially designed for CSS alerts and confirm boxes. but when I apply bootbox methods with my current jquery implementation it wont work !

bootbox - bootbox docs

below is my code

this is my href code that make 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>";


this is my jquery code part that contain bootbox lines.

<script type="text/javascript">
$('.confirmation').on('click', function () {
return bootbox.confirm('Are you sure?');
});
</script>


I need to pop up bootbox confirm box instead of plain java-script box when user click respective buttons!! how can I do that

Answer
  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>