1

Tengo una vista blade en laravel con un listado de registros que traigo de la BD, en cada uno he agregado una opción para eliminarlo, hasta ahora para confirmar el borrado tenía el return confirm(), pego el código:

<form action="{{ route('categories.destroy', ['category' => $category ]) }}" method="post" style="background-color: transparent;">
                  @method('DELETE')
                  @csrf
                  <button class="btn btn-sm" onclick="return confirm('Está seguro de eliminar el registro?')">
                    Borrar
                  </button>
                </form>

Y funcionaba perfecto, ahora intento hacerlo con SweetAlert2, agregué una función en el onclick:

<form action="{{ route('categories.destroy', ['category' => $category ]) }}" method="post" style="background-color: transparent;">
                  @method('DELETE')
                  @csrf
                  <button class="btn btn-sm" onclick="borrarRegistro()">
                    Borrar
                  </button>
                </form>

Y en la función agrego el código de SweetAlert2:

  function borrarRegistro(){
const swalWithBootstrapButtons = Swal.mixin({
  customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger'
  },
  buttonsStyling: false
})

event.preventDefault();
swalWithBootstrapButtons.fire({
  title: 'Está seguro de borrar el registro?',
  text: "Esta acción no se puede revertir!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Borrarlo!',
  cancelButtonText: 'No, Cancelar!',
  reverseButtons: true
}).then((result) => {
  if (result.value) {
    swalWithBootstrapButtons.fire(
      '¡Borrado!',
      'Your file has been deleted.',
      'success'
    )
  } else if (
    /* Read more about handling dismissals below */
    result.dismiss === Swal.DismissReason.cancel
  ) {
    swalWithBootstrapButtons.fire(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})
}

He agregado el event.preventDefault() para que me deje confirmar pero al confirmar no ejecuta el borrado, si quito preventDefault() abre y cierra el diálogo inmediatamente y borra, pero no me deja confirmar. Les agradecería si alguien me comenta que me está faltando para que funcione correctamente, gracias.

2
  • 1
    Necesitas agregar event.preventDefault(); antes del Swal.fire, aunque no recomiendo incrustar JS dentro del HTML pero, eso debería funcionar. Saludos. el 20 ago. 2020 a las 20:19
  • Gracias, ahora se detiene y me deja confirmar pero al hacerlo no ejecuta la ruta y no borra.
    – FabianM
    el 20 ago. 2020 a las 20:27

1 respuesta 1

4
+50

Lo que está pasando es que tu botón no ejecuta el submit de tu formulario debido a que le dices (con preventDefault()) que, después del evento click, no haga nada más.

Las soluciones a este problema pueden variar, pero aquí te presento una:

<form id="formularioEliminar-{{ $category->id }}" action="{{ route('categories.destroy', ['category' => $category ]) }}" method="post" style="background-color: transparent;">

...
if (result.value) {
    $("#formularioEliminar-"+ id_category).submit();

    swalWithBootstrapButtons.fire(
      '¡Borrado!',
      'Your file has been deleted.',
      'success'
    )
  }
 ...

Solución: Como ves, internamente debes hacerle submit() al formulario.

Pero no te recomiendo trabajar de esta manera ya que no controlas los posibles errores que puedan pasar. Mi sugerencia es que lo trabajes usando ajax o axios:

Aquí un ejemplo con axios:

// En el head debes tener el token
<meta name="csrf-token" content="{{ csrf_token() }}">

<button class="btn btn-sm" onclick="borrarRegistro()">

//Globalmente, añades el token a axios de la siguiente manera:
var token = document.head.querySelector('meta[name="csrf-token"]');
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;


function borrarRegistro(){
  const swalWithBootstrapButtons = Swal.mixin({
    customClass: {
      confirmButton: 'btn btn-success',
      cancelButton: 'btn btn-danger'
    },
    buttonsStyling: false
  })

  event.preventDefault();
  swalWithBootstrapButtons.fire({
    title: 'Está seguro de borrar el registro?',
    text: "Esta acción no se puede revertir!",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Borrarlo!',
    cancelButtonText: 'No, Cancelar!',
    reverseButtons: true
  }).then((result) => {
    if (result.value) {
      // Si el usuario acepta eliminar, haces una petición
      axios.delete('/categories/delete/' + id_category)
      .then(function (response) {
         //Satisfactoriamente
         swalWithBootstrapButtons.fire(
           '¡Borrado!',
           'Your file has been deleted.',
           'success'
         )
      })
      .catch(function (error) {
         // Si hay error
         swalWithBootstrapButtons.fire(
           '¡Ocurrio un error al borrar!',
           'Algo pasó.',
           'error'
         )
      });

      
    } else if (
      /* Read more about handling dismissals below */
      result.dismiss === Swal.DismissReason.cancel
    ) {
      swalWithBootstrapButtons.fire(
        'Cancelled',
        'Your imaginary file is safe :)',
        'error'
      )
    }
  })
}
1
  • Muchas gracias, por ahora lo dejé funcionando agregando el submit(), tuve que revisar el nombre del id del form, como es una vista index donde muestro todas las categorías activas ese id se repetía y al ejecutar el borrado eliminaba el primero que encontraba, no el cliqueado. Lo que hice fue agregar el id de categoría al id del form de esta forma: id="formEliminar{{ $category->id }}", y de la misma forma lo llamo en el submit. Lo quiero hacer con axios pero me da problema con el token csrf, cuando le encuentre la vuelta actualizo este post, gracias de nuevo!
    – FabianM
    el 27 ago. 2020 a las 13:26

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.