Sweetalert: Muchos botones combinados con una entrada solo devuelven el valor del botón

Creado en 31 oct. 2017  ·  6Comentarios  ·  Fuente: t4t5/sweetalert

A menos que me falte algo en los documentos, me parece una tontería que si creo una golpiza que tiene varios botones con diferentes valores combinados con un campo de entrada, el valor de la entrada no se devuelve usando el código de golondrina nativo. Esto realmente le quita el potencial que SweetAlert tiene para ofrecer.

Comentario más útil

@ t4t5 Cada botón debe devolver el valor de entrada y el valor del botón. Específicamente para mi caso de uso, estoy usando SweetAlert para una herramienta de administración de servidor basada en web y más específicamente para avisar al administrador cuando hacen clic en el botón "prohibir" en un usuario. La alerta tendría tres botones que necesito que devuelvan un valor de ("1d", "1w" o "para siempre") para representar un período de tiempo. También necesito un campo de entrada de texto para proporcionar una razón de por qué se está prohibiendo a un usuario. Al hacer clic en cualquiera de estos botones, permitiría que mi devolución de llamada emparejara el valor del botón en el que se hizo clic con el valor de entrada para construir una consulta de API a mi servidor para colocar una prohibición con una razón y cuánto tiempo debería durar la prohibición.

Con suerte, ese caso de uso debería aclarar la importancia de devolver ambos valores. Permite a los desarrolladores no tener que manipular las cosas o crear dos alertas para lograr lo que debería ser un proceso de un solo paso.

example

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

El fragmento anterior es mi forma "pirata" de obtener el contenido y los valores de los botones. Sin embargo, como se expresó anteriormente en este hilo, sería mucho mejor que solo devolviera ambos valores.

Todos 6 comentarios

¿Quiere decir que desea que tanto el botón de confirmación como algún otro botón devuelvan el valor de la entrada? ¿Podrías explicar cuál es exactamente tu caso de uso? :)

@ t4t5 probablemente tenga que ver con este FIXME.

swal({
    buttons: {
        cancel: "Go back!",
        one: {
          text: "Button One",
          value: 1
        },
        two: {
          text: "Button Two",
          value: 2
        },
        three: {
          text: "Button Three",
          value: 3
        }
      },
      content: {
        element: "input",
        attributes: {
          placeholder: "What's your favorite food?",
          type: "text",
        },
      }
/*
 * Only returns one value, because input is overridden by buttons
 * so you never get the input's value and the button's value
 * just the button's value.
 */
}).then( value => {
    switch (value) {                  
        case 1:
            swal("You pressed one!")
            break;
        case 2:
            swal("You pressed two!")
            break;
        case 3:
            swal("You pressed three!")
            break;
        default:
            swal("Phew, got outta there.");
    }
});

Sería muy útil tener la capacidad de usar el valor del botón, así como el valor de entrada, para realizar la lógica en lugar de anidar alertas y tener una entrada inútil porque los botones la anulan.

+1 para tener tanto el button valor content

Si configura una de las teclas del botón para "confirmar", devolverá el valor de la entrada. p.ej:

swal({
  buttons: {
    cancel: "Go back!",
    one: {
      text: "Button One",
      value: 1
    },
    two: {
      text: "Button Two",
      value: 2
    },
    confirm: {
      text: "Button Three",
    }
  },
  content: {
    element: "input",
    attributes: {
      placeholder: "What's your favorite food?",
      type: "text",
    },
  }
})

¿Es eso suficiente para su caso de uso, o quiso decir que cada botón debería devolver tanto el valor de entrada como el valor del botón?

@ t4t5 Cada botón debe devolver el valor de entrada y el valor del botón. Específicamente para mi caso de uso, estoy usando SweetAlert para una herramienta de administración de servidor basada en web y más específicamente para avisar al administrador cuando hacen clic en el botón "prohibir" en un usuario. La alerta tendría tres botones que necesito que devuelvan un valor de ("1d", "1w" o "para siempre") para representar un período de tiempo. También necesito un campo de entrada de texto para proporcionar una razón de por qué se está prohibiendo a un usuario. Al hacer clic en cualquiera de estos botones, permitiría que mi devolución de llamada emparejara el valor del botón en el que se hizo clic con el valor de entrada para construir una consulta de API a mi servidor para colocar una prohibición con una razón y cuánto tiempo debería durar la prohibición.

Con suerte, ese caso de uso debería aclarar la importancia de devolver ambos valores. Permite a los desarrolladores no tener que manipular las cosas o crear dos alertas para lograr lo que debería ser un proceso de un solo paso.

example

        banPlayer: function (data) {
            var swalField = document.createElement('input');
            swalField.setAttribute("placeholder", "Reason for ban");
            swal({
                title: 'Banning: ' + data.name,
                buttons: {
                    cancel: "Go back!",
                    day: {
                      text: "24hr",
                      visible: true,
                      closeModal: true
                    },
                    week: {
                      text: "1w",
                      visible: true,
                      closeModal: true
                    },
                    perm: {
                      text: "Forever",
                      visible: true,
                      closeModal: true
                    }
                  },
                  content: swalField,
                dangerMode: true
            }).then( value => {
                let reason = swalField.value;
                // build API query request and submit it
            });

El fragmento anterior es mi forma "pirata" de obtener el contenido y los valores de los botones. Sin embargo, como se expresó anteriormente en este hilo, sería mucho mejor que solo devolviera ambos valores.

Otro ejemplo sería un Modal ( closeOnEsc: false, closeOnClickOutside: false ) con un campo de entrada y dos botones: confirmar + cancelar. Voy a usar la solución @JayHerlth por ahora. Sería mejor si el parámetro de valor es un objeto si se establece {botones y contenido}.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

blackrosezy picture blackrosezy  ·  6Comentarios

krishnamraju picture krishnamraju  ·  3Comentarios

AlexV525 picture AlexV525  ·  4Comentarios

rapeflower picture rapeflower  ·  4Comentarios

daftspunk picture daftspunk  ·  4Comentarios