sweetalert confirmation on delete in angularjs on http request not working

Question

I am new to angularjs, i am having a problem where i am using sweetalert for alert messages. My problem here is i am getting the sweetalert confirmation box on delete button click, but "yes" and "no" events are not working inside it. I found only answers based on ajax request but i did not find on httprequest within the angularjs scope. Help is appreciated. Thanks in advance.

 var app = angular.module("myapp", ['sweetalert'])
 app.controller("ProductController", function ($scope, $http) {   
   $scope.delete = function (qid) {
        swal({
            title: "Are you sure?",
            text: "Your 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,
            showLoaderOnConfirm: true
        },
     function(isConfirm){ 
         if (!isConfirm) {
             swal("Cancelled", "Your imaginary file is safe :)", "error");
         }else{
             $http(httpreq).then(function (data) {
                 var httpreq = {
                     method: 'POST',
                     url: 'Product.aspx/delete',
                     headers: {
                         'Content-Type': 'application/json; charset=utf-8',
                         'dataType': 'json'
                     },
                     data: { qid: qid }
                 }
                 swal("Deleted!", "Your imaginary file has been deleted.", "success");                          
             });  
            }
         });
     };   });

Answer 1

You have wrong functional part of swal.

Here's a fixed sample code.

Change your code like this.

Original Code

swal({
    title: "Are you sure?",
    text: "Your 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) return;
    $http(httpreq).then(function (data) {
        var httpreq = {
            method: 'POST',
            url: 'Product.aspx/delete',
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
                'dataType': 'json'
            },
            data: { qid: qid }
        }
        swal("Deleted!", 
             "Your imaginary file has been deleted.", 
             "success");
        }).catch(function (error) {
             swal("Cancelled", 
                  "Your imaginary file is safe :)", 
                  "error");                 
        });
    });
});

Modified Code

swal({
    title: "Are you sure?",
    text: "Your 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,
    showLoaderOnConfirm: true           // Add this line
}, function(isConfirm){
    if (!isConfirm) {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    } else {
        // $timeout is sample code. Put your http call function into here instead of $timeout.
        $timeout(function(){
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
        },2000);

        /*$http({
            method: 'POST',
            url: 'Product.aspx/delete',
            headers: {
                'Content-Type': 'application/json; charset=utf-8',
                'dataType': 'json'
            },
            data: { qid: qid }
        }).then(function (data) {
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
        });*/
    }
});