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:

Answer 1

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
            }
          });
        });
      }
    }
  }
]);

Answer 2

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.

Answer 3

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.

Answer 4

$('.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">