estoy desde el back con express,con mysql sequelize y estoy usando en front ejs con sweetalert2, estoy queriendo hacer que cuando elimine un usuario con un submit desde un form, me lance una alerta a para confirmar o cancelar. El problema es que cuando hago click se envia el formulario y me lo elimina, hago uso del preventDefault() al comienzo del eventListener y ahi frena, pero no se hacer que cuando le ponga eliminar en la alerta con sweetAlert siga normalmente su curso.
Gracias estoy aprendiendo en el mundo de la programación.
Router
router.post('/user/:id',userController.deleteProcess);
Controller
deleteProcess: function(req,res,next){
db.User.findOne({
where:{
id:req.params.id
}
})
.then((user)=>{
user.destroy()
res.redirect('/user')
})
}
Javascript FRONT
userDelete.forEach((btn) => {
btn.addEventListener("click", function (e) {
Swal.fire({
title: "Do you want to save the changes?",
showDenyButton: true,
showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
console.log(result.isConfirmed);
} else if (result.isDenied) {
e.preventDefault();
Swal.fire("Changes are not saved", "", "info");
}
});
});
});
HTML
<table class="table table-striped table-bordered" id="mytable">
<thead>
<tr class="tr--colors">
<th scope="col">Usuario</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">Avatar</th>
<th scope="col">Rol</th>
</tr>
</thead>
<tbody>
<% users.forEach(user => { %>
<tr>
<td scope="row">
<%= user.user%>
<small>
<form
id="form__user--process"
action="/user/<%=user.id%>"
method="post"
>
<button
class="user_process"
style="color: red"
type="submit"
>
Eliminar
</button>
</form>
<button
id="user_process--edit"
style="color: green"
type="submit"
>
Editar <%=user.id%>
</button>
</small>
</td>
<td><%= user.name%></td>
<td><%= user.last_name%></td>
<td><%= user.avatar%></td>
<% if (user.role == "Admin") { %>
<td style="color: green"><%= user.role%></td>
<% }else{%>
<td><%= user.role%></td>
<%}%>
</tr>
<% }) %>
</tbody>
</table>
LO SOLUCIONE DE ESTA MANERA
let userDeleteProcess = document.querySelectorAll(".user_process");
function getUsuario(userID) {
Swal.fire({
title: `Estas segur@ de eliminar el usuario N° ${userID}`,
text: "No vas a poder revertir el cambio",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Si, Eliminalo!",
}).then((result) => {
if (result.isConfirmed) {
Swal.fire("¡¡Borrado!!", `Eliminaste el usuario. ${userID}`, "success");
setTimeout(() => {
$.ajax({
url: "/user/" + userID,
type: "POST",
success: function (respuesta) {
window.location.href = "/user";
},
});
}, 2300);
}
});
}
userDeleteProcess.forEach((btn) => {
btn.addEventListener("click", function (e) {
e.preventDefault();
});
});