0

Estoy trabajando en un proyecto en el que abro un listado de "personajes", de allí tengo un botón de acción para guardar los datos del personaje, pero antes de guardar, quiero abrir un alert en el que se muestre una lista desplegable con un par de opciones, que también serán guardadas conjuntamente con los otros datos. Mi problema es que no puedo ejecutar el código de la lista desplegable que saque de https://sweetalert2.github.io/,

    const { value: fruit } = await Swal.fire({
      title: 'Select field validation',
      input: 'select',
      inputOptions: {
        'Fruits': {
          apples: 'Apples',
          bananas: 'Bananas',
          grapes: 'Grapes',
          oranges: 'Oranges'
        },
        'Vegetables': {
          potato: 'Potato',
          broccoli: 'Broccoli',
          carrot: 'Carrot'
        },
        'icecream': 'Ice cream'
      },
      inputPlaceholder: 'Select a fruit',
      showCancelButton: true,
      inputValidator: (value) => {
        return new Promise((resolve) => {
          if (value === 'oranges') {
            resolve()
          } else {
            resolve('You need to select oranges :)')
          }
        })
      }
    })
    
    if (fruit) {
      Swal.fire(`You selected: ${fruit}`)
    }

Quiero utilizar adaptar una lista desplegable similar en el siguiente script.

<script>
function confirmar(id_matricula) {
    swal({
        title: "Confirmación",
        text: "¿Agregar este personaje al listado?",
        type: "warning",
        showCancelButton: true,
        confirmButtonClass: "btn-danger",
        confirmButtonText: "Confirmar",
        closeOnConfirm: false,
        cancelButtonText: "Cancelar"
    },
    function () {
        $('#tabla_listado_gral_personas').html('<p style="text-align:center;"><img src="<?php echo base_url(); ?>./images/reload2.gif" /></p>');
        $.ajax({
            url: base_url + "DatosPersona/confirmar",
            type: "GET",
            data: {
                id_matricula: id_matricula
            }
        }).done(function (data) {
                $('#tabla_personajes_listar').load(base_url + "DatosPersona/cargar_tabla_personajes/", function () {
                $(this).html();
            });
            //
            swal("Confirmado!", "Se guardó en el listado", "success");
        });
    });
}

Tengo instalado el plugin en 'proyecto\js\plugins\sweetalert.min.js', no se si tengo que agregar algo más, lo cambien 'proyecto\js\plugins\sweetalert2.min.js' pero tampoco funciona, no se la verdad que hay que hacer, todavía estoy aprendiendo.


Al final solo me quede con el sweetalert, no pude configurar el sweetalert2. Tengo todo basado en el primero. Saludos

1
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! si la P: es por pregunta, no es necesario.. en este sitio solo se aceptan preguntas ;)
    – gbianchi
    Commented el 19 abr. 2021 a las 16:04

1 respuesta 1

1

mira puedes basarte en este ejemplo, no importa que no utilices el parametro de input que tiene por defecto en el sweetalert, tambien le puedes poner html en duro. Espero te sirva

async function crearRegistro(){ 

let data = await Swal.fire({
    title: '<b>Crear Registro</b>',
    html: `<br>
    <select class="form-control selectpicker show-tick" id="lista" data-style="btn-warning" data-live-search="true" >
        <option value="-1">Seleccione una opción</option>
    </select>                   
    <br>`,
    showCancelButton: true,
    focusConfirm: false,
    showCancelButton: true,
    confirmButtonColor: '#28a745',
    cancelButtonColor: '#d33',
    cancelButtonText: '¡Cancelar!',
    confirmButtonText: `¡Guardar!`,
    onOpen: async () =>{ 
        Swal.showLoading();
       // Aqui cargas la informacion que necesites en tu select
        Swal.hideLoading();
    },
    preConfirm: () => {
        
        try{
            let data = {
                lista: document.getElementById('lista').value,
            };
            if(data.lista == '-1')
                throw new Error('Tienes que seleccionar  un elemento de la lista');
            return data;
        }catch(error){
            Swal.showValidationMessage(error);
        }
    }
});

if(data.value){ // si tiene value es que el usuario le dio  en el boton de confirmacion
   // tu proceso , data tiene  la informacion que se capturo en el select
}

}

2
  • Voy a probar con este ejemplo y vemos que sale, gracias por la ayuda! Commented el 21 abr. 2021 a las 11:29
  • @SuperUsuario si la respuesta es de tu ayuda, te agradeceria mucho que la marques como util con las flechita hacia arriba. me comentas que tal :) Commented el 21 abr. 2021 a las 17:20

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.