0

Tengo el problema de que no puedo mostrar mi preloader:

  1. En primer lugar oculto el preloader Indeterminate de materialize link del preloader de materialize para mostrar mis tablas.

  2. Cuando hago clic en aceptar en mi sweetalert necesito que se muestre el preloader para mostrar la carga de las filas de mis tabas ya que son dinámicas.

  3. Cuando termine de cargar necesito que se oculte nuevamente mi progress bar.

Mi código es la siguiente:

HTML: este es mi Preloader de materialize

<div class="progress container " id= "progreso">
    <div class="indeterminate"></div>
</div>

JS:

$("#progreso").hide(); // <-----primero lo oculto para mostrar mi tabla 
$(document).ready(function() {
    $('#btnEnviar').click(function() {
        Swal.fire({
            title: "Ingrese una fecha inicial y una final",
            confirmButtonText: "Aceptar",
            allowOutsideClick: false,
            allowEscapeKey: false,
            allowEnterKey: false,

            showDenyButton: true,
            denyButtonText: "Cancelar",

            background: "linear-gradient(63deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 37%, rgba(0,212,255,1) 100%)",
            color: "#FFFFFF",

            html: '<input type="date" id="Date1" class="flex-nowrap w-50 swal2-input">' + '<br>' +
                '<input type="date" id="Date2" class="flex-nowrap w-50 swal2-input">',

        }).then(function(isConfirm) {


cuando de aceptar quiero que se muestre mi preloader 
                var date1 = $('#Date1').val();
                var date2 = $('#Date2').val();
                if (isConfirm.isConfirmed) {
                    if (date1 > date2) {

$("#progreso").show(); //*!mostrar el progressbar

     $.ajax({
type: "POST",
                    url: url2,
                    dataType: "json",
                    data: { 'date1': date1, "date2": date2 },
                    success: function(datospos) {
                        $("#table").empty();

                        datospos.forEach(pos => {

                            var tablapos = "<tr>" +

                                "<td>" + pos.name + "</td>" +
                                "<td>" + pos.venta + "</td>" +
                                "<td>" + pos.date + "</td>" +
                                "<td>" + pos.asistencia + "</td>" +
                                "<td>" + pos.factor + "%" + "</td>" +
                                "</tr>";

                            $("#table").append(tablapos);

                        }); // termia el foreach
                        }
            });
        });
    
    $('#progreso').hide(); // <----- ocultar la barra de progreso nuevamente cuando termine de cargar todas las tablas
    });

Espero y me puedan ayudar :(

6
  • $("#progreso").hide(); ??? en tu código html (el primero que colocaste) no tiene este nombre
    – Yussef
    Commented el 9 nov. 2022 a las 4:07
  • @Yussef hola buen dia ya pude mostrar mi preloader ahora tengo el problema de ocultarlo ya intente colocar debajo de cada cierre de llaves y parentesis pero no nogro ocultarlo ahora ya edite mi codigo Commented el 9 nov. 2022 a las 16:13
  • Jose pero eso no responde mi duda, #progreso esto es la id de un elemento. En tu html de arriba no aparece ese id, entonces donde está #progreso???
    – Yussef
    Commented el 9 nov. 2022 a las 20:43
  • @Yussef ya edite mi codigo y el #progresso es el id de mi div <div class="progress container " **id= "progreso"**> <div class="indeterminate"></div> </div> Commented el 9 nov. 2022 a las 20:57
  • 1
    En teoría debería ir debajo de esta línea --> }); // termia el foreach
    – Yussef
    Commented el 9 nov. 2022 a las 21:06

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.