1

Tengo que mostrar un loader en una página que muestra gráficas y necesito que se muestre el loader hasta que no carguen todas.

El problema es que el loader se muestra en muy poco tiempo y se oculta antes de que carguen todos los contenidos.

El código es el siguiente:

/*
     * Se obtienen las urls que tiene acceso el usuario en el dashboard.
     */
    $.getJSON(getBaseUri() + 'dashboard/index', function(data) {
        var datas = data['return'];
        var urls = [];
        var idDash = [];
        var types = [];
        /*
         * Recorro el data para enviar los datos de cada dashboard
         */
        for (var i in datas) {
            //Se guardan las urls, los id de las dashboard y las descripciones en un arreglo
            urls.push({
                url: datas[i].route,
                id: datas[i].id,
                title: datas[i].privilege,
                div: datas[i].div
            });
            idDash.push(datas[i].id); //Se guardan los id de las dashboard en un arreglo
            types.push(datas[i].type); //Se guardan los tipos de dashboard en un arreglo
            /*
             * Envío los parámetros a la función receiveData()
             */
            receiveData(datas[i].route, datas[i].sign, datas[i].class, datas[i].div, datas[i].privilege, datas[i].type, types, idDash, datas[i].id, urls, datas[i].label, datas[i].xaxis, datas[i].yaxis, datas[i].background);
        }
    });
    /*
     * La función receiveData() recibe los parámetros de los dashboard que tiene acceso el usuario y trae los data de cada url consultada.
     */
    function receiveData(url, sign, iconClass, div, title, type, types, idDash, id, urls, label, xaxis, yaxis, background) {

/* 
 * Consulta de cada uno de los controladores y envía el data a cada una de las                funciones
*/

         $.ajax({
           url: url,
           method: 'GET',
           dataType: 'json',
           success: function(data){
             var datas = data['return'];
             if (type === "Bar") {
                 barChart(datas, title, div, type, types, idDash, id, urls);
             }
             if (type === "Indicator") {
                 indicatorsChart({
                     data: datas,
                     div: div,
                     title: title,
                     icon: sign,
                     class: iconClass,
                     idDash: id
                 });
             }
             if (type === "Sowing") {
                 sowingIndicator({
                     data: datas,
                     div: div,
                     title: title,
                     idDash: id
                 });
             }
             if (type === "BarChart") {
                 barCharts({
                     data: datas,
                     div: div,
                     title: title,
                     url: url,
                     label: label,
                     xaxis: xaxis,
                     yaxis: yaxis,
                     type: sign,
                     background: background
                 });
             }
           },
           error: function(error){
             console.log(error);
           }

         });
    }

A la función AJAX agregué el loader en el beforeSend, funciona pero sólo una vez y ya, también use los eventos .ajaxStart() y .ajaxStop() y no me funcionan.

Este es el HTML:

<div id="loading" class="text-center margin">
    <h3>Un momento por favor...</h3>
  </div>

<div class="col-lg-12 no-margin no-padding">
        <canvas id="productivity" width="500" height="270"></canvas>
      </div>
      <div class="col-lg-12 no-margin no-padding">
        <canvas id="plantProduction" width="500" height="300"></canvas>
      </div>

Esto es lo que he intentado y no funciona:

$(document).bind("ajaxSend", function(){
     $loading.show();
   }).bind("ajaxComplete", function(){
     $loading.hide();
   });

Existe alguna manera de mostrar el loader hasta que todas las peticiones esten completas?

Gracias.

1
  • @EmanuelVe ya puse la parte del código Saludos! el 16 ene. 2017 a las 14:29

1 respuesta 1

0

El problema esta en que estas usando ajaxComplete, este evento se dispara cada vez que se termina una solicitud, por lo que cuando termine la primera se invocara. Es decir que la segunda aun no ha terminado pero el evento fue invocado.

El evento que tienes que utilizar es ajaxStop el cual se invoca cuando ya no quedan solicitudes pendientes, osea que se invoca cuando termina de cargarse el batch. Este es de hecho el evento opuesto a ajaxStart.

$( document ).ajaxStart(function() {
   $loading.show();
});

$( document ).ajaxStop(function() {
  $loading.hide();
});

Este setup sera global, pues ambos eventos son globales: Siempre que se inicie una solicitud ajax (via jQuery) se invocara ajaxStart. y siempre que no haya mas solicitudes pendientes se invocara ajaxStop.

Documentación: Eventos Ajax

1
  • Si me funcionó! :) Muchas gracias saludos! el 16 ene. 2017 a las 14:46

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.