Page is not waiting for response from SweetAlert confirmation window

Question

I am trying to upgrade my JavaScript confirm() action to use SweetAlert. Currently my code is something like this:

<a href="/delete.php?id=100" onClick="return confirm('Are you sure ?');" >Delete</a>

This waits for the user to confirm before navigating to the delete page. I would like to use this example from SweetAlert to ask the user to confirm before deleting:

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) {     
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } 
  else {     
    swal("Cancelled", "Your imaginary file is safe :)", "error");  
  } 
});

Everything I have tried has failed. When the first alert is displayed, the page has gone ahead and deleted the item and refreshed before the user has even clicked on the alert buttons. How do I make the page wait for the users input?

Any help would be greatly appreciated.

score 6 · Accepted Answer · answered Jan 16 '15 at 15:42

You cannot use this as a drop-in replacement for confirm. confirm blocks the single thread of execution until the dialog has been acknowledged, you cannot produce the same behavior with a JavaScript/DOM-based dialog.

You need to issue a request to /delete.php?id=100 in the success callback for your alert box.

Instead of...

swal("Deleted!", "Your imaginary file has been deleted.", "success");

You need

<a href="#">Delete<a>
...

$.post('/delete.php?id=100').then(function () {
  swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

You also must fix your delete.php to only accept POST requests. It's a huge problem to allow GET requests to delete resources. The first time Google or any other crawler finds your page, it will look at the href of every link in your document and follow each link, deleting all of your content. They will not be stopped by the confirm box, as they probably (with the exception of Google) won't be evaluating any JavaScript.

Thanks for the tip re GET/POST. Ive added in your solution and it is working fine. I was been thrown by the use of single and double quotes. I had my onClick attribute using double quotes, so any double quotes inside it were messing it up. — dmeehan, Jan 16 '15 at 16:08

score 5 · Answer 2 · answered Mar 31 '16 at 11:34

You can do it this way.

HTML:

<a href="/delete.php?id=100" class="confirmation" >Delete</a>

JS:

$('.confirmation').click(function (e) {
    var href = $(this).attr('href');

    swal({
        title: "Are you sure?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "No, cancel plx!",
        closeOnConfirm: true,
        closeOnCancel: true
    },
            function (isConfirm) {
                if (isConfirm) {
                    window.location.href = href;
                }
            });

    return false;
});

Seems a hack but it's working for me.

score 0 · Answer 3 · edited May 17 '15 at 13:17

0

$('.delete').click(function () {
var id = this.id;
swal({
  title: "Are you sure?",
  text: "Your will not be able to recover this post!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
   alert(id);
});
});


<a id="<?php echo $row->id_portfolio ?>" class=" delete">

edited May 17 '15 at 13:17

HaveNoDisplayName

8,291
106
37
47

answered May 17 '15 at 12:59

prapto

1

2

add a bit explanation to your answer? – HaveNoDisplayName May 17 '15 at 13:17

score 0 · Answer 4 · answered Nov 04 '16 at 16:49

Here's an example in an Angular directive (since SweetAlert is offered through an angular directive wrapper). This is one 'elegant' method for doing this in JavaScript. On a click event, there is an e.stopImmediatePropagation(), then if the user confirms, it evaluates the "ng-click" function. (Note scope.$eval is not a JavaScript eval()).

Markup: <i class="fa fa-times" ng-click="removeSubstep(step, substep)" confirm-click="Are you sure you want to delete a widget?"></i>

Simple "confirm click" directive:

/**
 * Confirm click, e.g. <a ng-click="someAction()" confirm-click="Are you sure you want to do some action?">
 */
angular.module('myApp.directives').directive('confirmClick', [
  'SweetAlert',
  function (SweetAlert) {
    return {
      priority: -1,
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.bind('click', function (e) {
          e.stopImmediatePropagation();
          e.preventDefault();

          var message = attrs.confirmClick || 'Are you sure you want to continue?';

          SweetAlert.swal({
            title: message,
            type: 'warning',
            showCancelButton: true,
            closeOnConfirm: true,
            closeOnCancel: true
          }, function (isConfirm) {
            if (isConfirm) {
              if(attrs.ngClick) {
                scope.$eval(attrs.ngClick);
              }
            } else {
              // Cancelled
            }
          });
        });
      }
    }
  }
]);

Page is not waiting for response from SweetAlert confirmation window

4 Answers4

Linked