Как запустить SweetAlert вместо стандартного метода подтверждения javascript

Question

В настоящее время это код, который я использую для запуска нормального окна подтверждения на основе подтверждения класса. Все это делается с помощью ссылки href, а не на событие onClick. В результате щелчка нужно запустить другой код, отрезанный в другом файле (с намерением удалить строку в db).

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

То, что я хочу, чтобы заменить метод подтверждения с помощью этой функции SweetAlert

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

Любой знает, как это сделать, то, что происходит, когда я пытаюсь поставить sweetalert внутри функция onClick заключается в том, что появляется предупреждение, но оно автоматически удаляет строку без необходимости подтверждать что-либо, и предупреждение исчезает.

Answer 1

Я сделал это codepen на случай, если кто-то захочет отладить. Оказывается, это работает (проверьте журнал браузера консоли для того, когда «сделано» печатается) 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"); 
    } 
    }); 
}) 

Answer 2

Добавить 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"); 
    }); 

    }); 

Answer 3

Попробуйте этот код, который упоминается как в документации:

$('.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 
    }); 
}); 

Answer 4

Я нашел решение!

$('.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; 
    }); 
    }