How to run a SweetAlert instead of default javascript confirm method

Question

Currently this is the code I use to run a normal confirm window based on the class "confirmation". This is all done with an href link and not on a button onClick event. As the result of the click is to run another code snipped placed in a different file (with the intention to delete a row in db).

$('.confirmation').on('click', function () {
        return confirm('Er du sikker på at du vil slette?');
    });

What I want is to replace the confirm method with this SweetAlert function

    swal({   
 title: "Are you sure?",   
 text: "You will not be able to recover this imaginary file!",  
 type: "warning", 
 showCancelButton: true,   
 confirmButtonColor: "#DD6B55",   
 confirmButtonText: "Yes, delete it!",   
 closeOnConfirm: false 
}, function(){   
 swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
});

Anyone know how to do this, what happens when I try to place the sweetalert inside the onClick function is that the alert appears but it automatically delete the row without me having to confirm anything and the alert fades out.

score 11 · Answer 1 · answered Jul 15 '15 at 13:23

I found the solution!

$('.confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
warnBeforeRedirect(linkURL);
});

 function warnBeforeRedirect(linkURL) {
    swal({
      title: "Leave this site?", 
      text: "If you click 'OK', you will be redirected to " + linkURL, 
      type: "warning",
      showCancelButton: true
    }, function() {
      // Redirect the user
      window.location.href = linkURL;
    });
  }

score 2 · Answer 2 · answered Jul 15 '15 at 13:07

I made this codepen in case anyone wants to debug. It appears this is working (check the browser console log for when 'done' is printed) http://codepen.io/connorjsmith/pen/YXvJoE

$('.confirmation').on('click', function(){
  swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
  },
  function(isConfirm){
    if (isConfirm) {
      console.log('done');
      swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
  });
})

Thank you for replying, this does not work :( The same thing happens, once i press the button the dialog box appears but automatically deletes the row. Its like it always return true. It follow the link without confirmation. If I remove the link from the href the script works... — Knut Pedersen, Jul 15 '15 at 13:16

score 0 · Answer 3 · answered Jul 15 '15 at 13:09

Add event.preventDefault(); preventDefault();

      $('.confirmation').on('click', function (event) {
         event.preventDefault();
       swal({   
        title: "Are you sure?",   
        text: "You will not be able to recover this imaginary file!",  
        type: "warning", 
        showCancelButton: true,   
        confirmButtonColor: "#DD6B55",   
        confirmButtonText: "Yes, delete it!",   
        closeOnConfirm: false 
    }, function(){   
        swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
    });

   });

Hi, this doesn't do anything actually. The box appears, but once i confirm it does not delete anything.. — Knut Pedersen, Jul 15 '15 at 13:14

score 0 · Answer 4 · answered Jul 15 '15 at 13:10

0

Try this code which is mentioned as in docs:

$('.confirmation').on('click', function () {
    swal({   
         title: "Are you sure?",   
         text: "You will not be able to recover this imaginary file!",  
         type: "warning", 
         showCancelButton: true,   
         confirmButtonColor: "#DD6B55",   
         confirmButtonText: "Yes, delete it!",   
         closeOnConfirm: false 
    }, function(isConfirm){   
           return isConfirm; //Will be either true or false
    });
});

answered Jul 15 '15 at 13:10

Guruprasad J Rao

29,410
14
101
200

Thank you for replying, this does not work :( The same thing happens, once i press the button the dialog box appears but automatically deletes the row. Its like it always return true. It follow the link without confirmation. If I remove the link from the href the script works... – Knut Pedersen Jul 15 '15 at 13:14

score 0 · Answer 5 · answered May 16 '18 at 19:29

I wrote this function:

function sweetConfirm(title, text) {
        event.preventDefault();
        var target = $(event.target);
        var href = null;
        var form = null;

        if (target.is("a")) href = target.attr("href");
        else if (target.is("button:submit")) form = target.closest("form");
        else if (target.is("button")) href = target.attr("href") || target.attr("value");

        swal({
            title: title,
            text: text,
            type: "warning",
            allowOutsideClick: true,
            showCancelButton: true
        }, function () {
            if (href) window.location.href = href;
            else if (form) form.submit();
        });
    }

sweetConfirm function will accept a submit button, link button or a normal button and will ask before do the action.

You can use it in the following scenarios:

<a type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
    Link Button 1
</a>

<button type="button" class="btn btn-default" href="/" onclick="return sweetConfirm('Are you sure?')">
    Link Button 2
</button>

<form action="/" method="DELETE">
    <input type="hidden" name="id" value="..">
    <button type="submit" class="btn btn-danger" onclick="return sweetConfirm('Are you sure?')">
        Delete
    </button>
</form>

score -1 · Answer 6 · answered Jan 04 '19 at 21:17

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@7.32.4/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.32.4/dist/sweetalert2.all.min.js"></script>
</head>
<body>

    <a id="confirmation" href="test">Test</a>

    <script type="text/javascript">
        $('#confirmation').click(function(e) {
e.preventDefault(); // Prevent the href from redirecting directly
var linkURL = $(this).attr("href");
console.log(linkURL)
warnBeforeRedirect(linkURL);
});

        function warnBeforeRedirect(linkURL) {
            Swal({
                title: 'sAre you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    window.location.href = linkURL;
                }
            })

        }



    </script>

</body>
</html>

Thanks for making your first response. How does your answer add to or contribute to the discussion in a way different from previous answers? — wlh, Jan 04 '19 at 21:39

How to run a SweetAlert instead of default javascript confirm method

6 Answers6

Linked