Estoy usando Rails form_with como formulario remoto. Antes del envío, quiero mostrar un cuadro de confirmación personalizado con un mensaje dinámico. Después de que la casilla esté efectivamente confirmada, eventualmente quiero enviar el formulario. Se me ocurrió el controlador de eventos 'ajax: beforeSend':
const form = document.getElementById('assign_sessions_to_employees') form.addEventListener( 'ajax:beforeSend', (event) => { event.preventDefault(); swal.fire({ title: 'Are you sure ?', text: `You are about to spend ${expectedExpenditure()} credits.`, showCancelButton: true, }).then((result) => { if (result.isConfirmed) { console.log('submitting') Rails.fire(form, 'submit'); } }) } ) Esto funciona bien, sin embargo, cuando ejecuto Rails.fire(form, 'submit'); , cuando finalmente quiero enviar el formulario, esto 'ajax:beforeSend' y me quedo atascado en el bucle.
¿Cuál sería la forma correcta de lograr este comportamiento con form_with y rails ujs?
Si usa una declaración de función (también conocida como función con nombre), puede eliminar el controlador de eventos con EventTarget.removeEventListener() :
function handleConfirmation(event){ let form = event.target; event.preventDefault(); swal.fire({ title: 'Are you sure ?', text: `You are about to spend ${expectedExpenditure()} credits.`, showCancelButton: true, }).then((result) => { if (result.isConfirmed) { console.log('submitting'); form.removeEventListener('ajax:beforeSend', handleConfirmation); Rails.fire(form, 'submit'); } }) } } const form = document.getElementById('assign_sessions_to_employees') form.addEventListener('ajax:beforeSend', handleConfirmation);Otra alternativa es simplemente establecer un atributo de datos en su controlador de eventos:
const form = document.getElementById('assign_sessions_to_employees') form.addEventListener( 'ajax:beforeSend', (event) => { if (event.target.dataset.confirmed) { return }; event.preventDefault(); swal.fire({ title: 'Are you sure ?', text: `You are about to spend ${expectedExpenditure()} credits.`, showCancelButton: true, }).then((result) => { if (result.isConfirmed) { console.log('submitting'); form.dataset.confirmed = true; Rails.fire(form, 'submit'); } }) } )