如何检测Sweetalert2中的Cancel按钮

Question

我使用带有Ajax调用的Sweetalert2。
我想只在点击OK后显示错误信息。

当前，当单击CANCEL或在模态外部时，它仍然会执行Ajax调用(并显示错误)。

$(function() {
$('.user-details').click(function(e) {
e.preventDefault();
Swal.fire({
title: 'Are you sure?',
text: '',
icon: 'question',
showCancelButton: true,
showLoaderOnConfirm: true,
reverseButtons: true,
preConfirm: function() {
console.log('AJAX request');
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, 1200);
});
},
}).then(function() {
Swal.fire({
title: 'Error!',
text: 'I want to show this, only after clicking OK!',
icon: 'error',
showCancelButton: false,
showLoaderOnConfirm: false,
});
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<button class='btn btn-success user-details'>View Details</button>

通过点击取消或在模态外，我希望它取消而不显示"错误"。消息。

Answer 1

试试这个

Swal.fire({
title: 'titulo',
text: 'text',
icon: 'warning',
showCancelButton: true,
cancelButtonText: 'Cancelar',
confirmButtonColor: '#00CC00',
cancelButtonColor: '#999999',
confirmButtonText: 'Si, Eliminar',
reverseButtons: true,
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: 'POST', //or GET
url: 'url',
data: { id: id },
success: (data, status, xhr) => {
console.log(status);

},
error: (xhr, status, error) => {
console.log('xhr', xhr);
console.log('status', status);
console.log('error', error);
},
dataType: 'json',
});
}
});