The page does not expect a response from the SweetAlert confirmation window

Question

I am trying to update the JavaScript confirm() action to use SweetAlert . My code currently looks something like this:

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

This awaits confirmation from the user before going 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 tried failed. When the first warning is displayed, the page went ahead, deleted the item and was updated before the user even clicked on the warning buttons. How to make the page wait for user input?

Any help would be greatly appreciated.

Answer 1

You cannot use this as a substitute for confirm . confirm blocks a single thread of execution until the dialog is confirmed, you cannot create the same behavior in a dialog box based on JavaScript / DOM.

You need to send the request /delete.php?id=100 to the success callback for your notification window.

Instead...

 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 should also fix your delete.php to accept only POST requests. This is a huge problem allowing GET requests to delete resources. The first time Google or any other crawler finds your page, it will look href each link in your document and follow each link, deleting all the content. They will not be stopped in the confirm field, since they probably (with the exception of Google) will not evaluate any JavaScript.

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

Hack seems to be, but it works for me.

Answer 3

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

Answer 4

Here is an example in the Angular directive (since SweetAlert is offered through the Angular shell). This is one of the "elegant" ways to do this in JavaScript. The click event has e.stopImmediatePropagation (), and then, if the user confirms, it evaluates the "ng-click" function. (Note area. $ Eval is not JavaScript eval ()).

Layout: <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, eg <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 } }); }); } } } ]);