Creé una aplicación rápida y, al final, agregué una alerta para uno de los botones de eliminación en la aplicación. Sin embargo, la alerta desaparece incluso antes de que pueda hacer clic en "Aceptar".

Este es mi formulario de eliminación

<form
  action="/grades/<%=grade._id%>?_method=DELETE"
  method="POST"
  class="delete-form"
>
  <input
    type="submit"
    class="btn btn-danger mt-3"
    value="Delete Class"
    id="delBotton"
  />
</form>

Este es mi archivo main.js:

const delBtn = document.getElementById('delBotton');

delBtn.addEventListener('click', () =>
  alertify.alert('This is an alert dialog.', function () {
    alertify.message('OK');
  })
);

Y finalmente, esta es mi ruta de eliminación:

router.delete('/:id', middleware.checkGradeOwnership, (req, res) => {
  Grade.findByIdAndRemove(req.params.id, (err) => {
    try {
      res.redirect('/grades');
    } catch (err) {
      res.redirect('/grades');
      console.log(err);
    }
  });
});

¿Cómo puedo solucionar esto?

2
Sravan SS 1 sep. 2020 a las 15:54

1 respuesta

La mejor respuesta

Dado que su entrada tiene type="submit", enviará el formulario de forma predeterminada. Para evitar este comportamiento predeterminado, puede llamar a e.preventDefault() en el controlador de clics o, más apropiadamente, establecer la entrada en type="button" ya que no planea usar este botón para enviar el formulario. A continuación, la biblioteca alertify parece tener un onok evento que puede usar para verificar si el usuario ha confirmado, que luego puede usar para llamar a la función de envío del formulario manualmente después que el usuario haya presionado OK, consulte el siguiente fragmento de código ejecutable para ver un ejemplo de trabajo:

const delForm = document.getElementById('delForm');
const delBtn = document.getElementById('delBotton');

delBtn.addEventListener('click', () => {
  alertify.alert('This is an alert dialog.', () => {
    alertify.message('OK');
  }).set({ 'invokeOnCloseOff': true, 'onok': () => delForm.submit()})
});
<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css" />
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css" />
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>

<form action="/grades/<%=grade._id%>?_method=DELETE" method="POST" class="delete-form" id="delForm">
  <input type="button" class="btn btn-danger mt-3" value="Delete Class" id="delBotton" />
</form>

NOTA: inicialmente olvidé configurar invokeOnCloseOff en true, pero parece que esto hace que el evento onok se active independientemente de si el usuario presiona el botón Aceptar. o no. El invokeOnCloseOff debe establecerse en verdadero si desea diferenciar entre hacer clic en el botón Aceptar y descartar la alerta modal de otra forma. Más información aquí

3
etarhan 1 sep. 2020 a las 14:40