Sabemos que a biblioteca javascript jquery-ajax-unobstrusive permite exibir mensagens de confirmação através do atributo data-ajax-confirm=”Sua mensagem”
Porém, esse atributo faz com que a biblioteca exiba uma caixa de diálogo padrão do javascript pedindo a confirmação da execução da ação.
Podemos personalizar a mensagem de confirmação criando um novo atributo. Segue exemplo a seguir usando as tags <a> e <form>. Escolhemos o nome do atributo como data-ajax-confirmation. Você poderá utilizar outro caso seja de seu interesse.
Caso necessário você poderá expandir o código javascript para outras tags, como por exemplo, button.
function pedirConfirmacao(evt, el) {
var msg = $(el).attr("data-ajax-confirmation");
if (msg !== undefined && msg != "") {
evt.preventDefault;
evt.stopPropagation;
Swal.fire({
title: 'Tem certeza?',
text: msg,
icon: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Sim',
cancelButtonText: 'Não'
}).then((result) => {
if (result.isConfirmed) {
$(el).unbind(evt);
if (evt.type == "click") {
$(el).click();
} else {
$(el).submit();
}
confirmacao();
}
});
return false;
}
return true;
}
confirmacao();
function confirmacao() {
$("body").on("click", "a[data-ajax-confirmation]", function (evt) {
pedirConfirmacao(evt, this);
return false;
});
$("body").on("submit", "[data-ajax-confirmation]", function (evt) {
pedirConfirmacao(evt, this);
return false;
});
}