Lo que estoy tratando de obtener es que si un usuario obtiene algún error de validación , el bootbox mostrará que "esto es obligatorio" . Hasta ahora, he logrado esto. Pero el problema principal es que cierra la ventana del cuadro de inicio si el usuario hace clic en el botón "Sí" . Recibo esto porque tuve que usar la devolución de llamada asíncrona de g en bootbox. Por esta razón, incluso después de devolver false , el bootbox se cierra. Pero quiero que los usuarios muestren el cuadro hasta que presionen el botón cancelar . Si hacen clic en Sí , entonces debería mostrar la validación, con el cuadro abierto. Este es mi código:
bootbox.confirm({ message: 'Test', buttons: { confirm: { label: 'Yes', className: 'btn-primary' }, cancel: { label: 'No', className: 'btn-danger' } }, callback: async function (result) { var isValid = $('#form').valid(); if (result && !isValid) { return false; //it's not working. It's closing the bootbox } if (result && isValid) { /* for this await function I had to use async callback, without this bootbox is opend */ var data = await self.createData(); $.ajax({ type: "POST", success: function (result) { }, }).then(function () { }); } } });¿Cómo puedo resolver esto?
No me parece que bootbox.confirm() tenga algún tipo de soporte para devoluciones de llamada async como las que está tratando de usar. El bootbox se cierra cuando regresa su devolución de llamada, que estará en el punto en que golpeó su primera await a menos que devuelva explícitamente false , pero una función de devolución de llamada async SIEMPRE devuelve una promesa que no es explícitamente false . No puedes cambiar eso.
Lo que puede hacer es hacer que su devolución de llamada sea una función de devolución de llamada regular, no async que puede devolver false si la validación falla y luego crear una función async incrustada donde puede usar await para llamar desde dentro de esa primera devolución de llamada como se muestra a continuación. Tenga en cuenta que el bootbox se cerrará antes de que se complete su código asincrónico, por lo que si hay algún error en el código del bootbox, necesitará una nueva forma de presentar esos errores, tal vez instalando un nuevo bootbox. Aquí hay una forma de hacer este código mientras todavía usa await .
bootbox.confirm({ message: 'Test', buttons: { confirm: { label: 'Yes', className: 'btn-primary' }, cancel: { label: 'No', className: 'btn-danger' } }, callback: function (result) { var isValid = $('#form').valid(); if (result) { if (!isValid) { // keep prompt open until user presses Cancel return false; } async function run() { const data = await self.createData(); const result = await $.ajax({ ... }); // do something with result } // now call async function here (dialog will close) run().catch(err => { // do something with an error here console.log(err); }); } return true; } }); Alternativamente, podría evitar usar await y solo usar .then() y .catch() y luego no necesitaría esta capa adicional de función:
bootbox.confirm({ message: 'Test', buttons: { confirm: { label: 'Yes', className: 'btn-primary' }, cancel: { label: 'No', className: 'btn-danger' } }, callback: function (result) { var isValid = $('#form').valid(); if (result) { if (!isValid) { // keep prompt open until user presses Cancel return false; } self.createData().then(data => { return $.ajax({ ... }).then(result => { // do something with result }); }).catch(err => { // do something with error here console.log(err); }); } return true; } });