0

Estoy intentando hacer un cuadro de diálogo con los dos clásicos botones (si/no) (Aceptar/Rechazar) en SwwetAlert2, que está incluido en una función. Necesito que la función me retorne verdadero o falso, dependiendo de la opción elegida por el usuario. Llevo ya un par de días intentándolo y no consigo resolverlo. Agradezco cualquier ayuda o sugerencia. Adjunto código.

function pregunta(theField,tit,tx_si,tx_no) // campo_retorno, titulo, texto para si, testo para no
{ theField.focus(); // por si rechaza la opción
´´´
      swal.fire({
      background: '#FFFFDF',    
      allowOutsideClick: false,
      allowEscapeKey: false,
      allowEnterKey: false,
      width: '80%',
      title: "Confirmar acción",
      text: tit,
      icon: "question",
      showCancelButton: true,
      confirmButtonText: 'Si, continuar',
      cancelButtonText: 'No, cancelar',
      closeOnConfirm: false,
      closeOnCancel: false

    }).then(function(isConfirm) {
      if (isConfirm.value) {
        swal.fire({
          background: '#FFFFDF',    
          allowOutsideClick: false,
          allowEscapeKey: false,
          allowEnterKey: false,
          width: '80%',
          title: 'Confirmado',
          text: tx_si,
          icon: 'success',
          onClose: () => {
            return true;
            }
        });
        return true;
      } else {
       swal.fire({
          background: '#FFFFDF',    
          allowOutsideClick: false,
          allowEscapeKey: false,
          allowEnterKey: false,
          width: '80%',
          title: 'Rechazado',
          text: tx_no,
          icon: 'info',
          onClose: () => {
            return false;
            }
        });
       return false;
      } // else      
    });
 return isConfirm;
}; // pregunta

Me gustaría poder utilizar la función de esta manera:

siono = pregunta(theForm.campo,'Prueba','Formulario Enviado','Formulario No Enviado');
if (siono){ 
       Accion1;
      }else{ 
      Accion2
      } ```
0

2 respuestas 2

0

Aquí puedes ver varios ejemplos --> https://sweetalert2.github.io/. Por ejemplo: A confirm dialog, with a function attached to the "Confirm"-button... parece que hace lo que buscas. Cuando confirmas que deseas eliminar el archivo, te devuelve -->
'Deleted!', 'Your file has been deleted.', 'success'

Adjunto código:

   Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})
3
  • Muchas gracias por tu interés, Uno_Mas, ya había visto los mensajes de la página de SweetAlert2.
    – jhonalone
    Commented el 15 ago. 2020 a las 18:46
  • El código que uso, presenta los dos mensajes UNICAMENTE cuando el return de la función ·pregunta' se fija a false. Pero yo lo que pretendo es realizar una acción para cada opción, basándome en el resultado de cada opción elegida por el usuario y basada en el reultado general de la función pregunta()
    – jhonalone
    Commented el 15 ago. 2020 a las 18:54
  • No te entiendo... Hay un ejemplo en la página de como devolver algo diferente en cada respuesta del usuario. Basado en el resultado de la función pregunta ?
    – Uno_Mas
    Commented el 15 ago. 2020 a las 19:22
0

Gracias nuevamente Uno_Mas. Supongo que te refieres a este ejemplo:

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

swalWithBootstrapButtons.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, cancel!',
  reverseButtons: true
}).then((result) => {
  if (result.value) {
    swalWithBootstrapButtons.fire(
      'Deleted!',
      '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'
    )
  }
})

Lo que yo pretendía era algo más complicado que mostrar los mensajes. Era asociar una serie de acciones diferentes a cada una de las opciones y, además, que me sirviera la función para llamarla con textos y acciones diferentes. Mi error ha sido intentar asociar las acciones al resultado general de la función. Al final he decidido utilizar variables globales para evaluar los resultados de cada opción. Por si interesa a alguien, aquí edito la función que me ha funcionado.

function pregunta(theField,tit,tx_si,tx_no) // campo_retorno, titulo, texto para si, testo para no
{ 
 acepto = false;
 rechazo = false;
 theField.focus();
 
      swal.fire({
      background: '#FFFFDF',    
      allowOutsideClick: false,
      allowEscapeKey: false,
      allowEnterKey: false,
      width: '80%',
      title: "Confirmar acción",
      text: tit,
      icon: "question",
      showCancelButton: true,
      confirmButtonText: 'Si, continuar',
      cancelButtonText: 'No, cancelar',
      closeOnConfirm: false,
      closeOnCancel: false

    }).then(function(isConfirm) {
      if (isConfirm.value) {
        swal.fire({
          background: '#FFFFDF',    
          allowOutsideClick: false,
          allowEscapeKey: false,
          allowEnterKey: false,
          width: '80%',
          title: 'Confirmado',
          text: tx_si,
          icon: 'success',
          onClose: () => {
            acepto = true;
            aceptado = true;
            $('#btnGuardar')[0].click();
            }
        });
      } else {
       swal.fire({
          background: '#FFFFDF',    
          allowOutsideClick: false,
          allowEscapeKey: false,
          allowEnterKey: false,
          width: '80%',
          title: 'Rechazado',
          text: tx_no,
          icon: 'info',
          onClose: () => {
            rechazo = true;
            aceptado = false;
            }
        });
      } // else      
    });
 
return false;
}; // pregunta

Luego juego con los resultados de las tres variables "acepto", "rechazo" y "aceptado" y las devuelvo a sus valores de false después de su uso de esta manera:

if (!acepto && !rechazo)
    { 
      pregunta(theForm.Micampo,'Prueba','Formulario Enviado','Formulario No Enviado');
    }

if (acepto)
   {
      siono = true; // esta variable decide la acción a realizar si acepta o no
      acepto = false;
   }
   else
   {
      siono = false; // esta variable decide la acción a realizar si acepta o no
      rechazo = false;
   }
   

La variable "aceptado" la uso para no repetir otro mensaje asociado por defecto a una de las acciones.

No sé por qué, pero la función "pregunta()" tiene que retornar siempre false para que se muestre.

Gracias a todos. Un saludo y espero que le sirva a alguien además de a mí.

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.