0

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

1 respuesta 1

0

La operación para evitar cualquier comportamiento default debe ejecutarse antes que cualquier otra.

userDelete.forEach((btn) => {
  btn.addEventListener("click", function (e) {
    e.preventDefault(); // Esto va primero
    Swal.fire({
      title: "Do you want to save the changes?",
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: `Save`,
      denyButtonText: `Don't save`,
    }).then((result) => {
      if (result.isConfirmed) {
        // El usuario ha confirmado
      } else if (result.isDenied) {
        // El usuario ha cancelado
      }
    });
  });
});

También te dejé un par de comentarios en donde debe ir el código para cuando el usuario confirma o cancela. En cada bloque debes mandar a llamar el código que quieras que se ejecute según la respuesta del usuario.

Debes prestar atención a la palabra clave then, la cual es una función que regresa un objeto Promise, el cuál se ejecutará de manera asíncrona.

Este es el código que se ejecuta de manera asíncrona:

      if (result.isConfirmed) {
        // El usuario ha confirmado
      } else if (result.isDenied) {
        // El usuario ha cancelado
      }

El cual debes cambiar para que se integre a la lógica de tu aplicación. Ejemplo:

      if (result.isConfirmed) {
        borrarUsuario();
      }

En donde borrarUsuario es una función que hace una petición HTTP a la URL /user/:id de tu servidor.

3
  • Entiendo!, el e.preventDefault(); lo hice de esa manera que me mostras, y cuando confirmo no sigue su curso de eliminar, solo queda sin avanzar, lo que no estaria entendiendo es como hacer que cuando le de a confirmar siga su curso y que envie el formulario por post. Por eso pensaba que solo efectue el preventDefault cuando sea rechazado y no envie el formulario por post. Gracias por la respuesta, ya cambie el titulo.
    – Jon
    Commented el 13 oct. 2020 a las 17:57
  • Bien, actualicé mi respuesta, espero te sea de utilidad. Commented el 13 oct. 2020 a las 18:11
  • Gracias por tu pronta respuesta Baruch!, te cuento que al final lo realice de esta manera. No se si es la correcta, pero funciona bien, aun no comprendo mucho, pero estoy contento con lo que hice, si tenes algun tip te lo agradeceria. EDITE EL POSTEO PARA QUE VEAN LA SOLUCION
    – Jon
    Commented el 13 oct. 2020 a las 23:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.