Показывать loader до тех пор, пока они не загрузят все просьбы ajax

Я должен показывать loader на странице, которая показывает графики, и мне нужно, чтобы он явился loader до тех пор, пока они не загрузят все.

Проблема состоит в том, что loader появляется в совсем небольшом времени и скрывается до того, как они загрузили все контенты.

Код - следующий:

/*
     * 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);
           }

         });
    }

К функции AJAX я добавил loader в beforeSend, функционируй, но только однажды и уже, также используйте события .ajaxStart() и .ajaxStop() и они я не функционируют.

Это 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>

Это то, что я попробовал, и оно не функционирует:

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

Существует какой-то способ показывать loader до тех пор, пока все просьбы не будут полными?

Спасибо.

1
задан 16.01.2017, 16:29
0 ответов

Проблема, - в котором ты используешь ajaxComplete, это событие взрывается каждый раз, когда заканчивается запрос, которым, когда он закончит первую, он будет призван. А именно, который вторая даже не закончила, но событие было призвано.

Событие, которое ты должен использовать, ajaxStop который призывается, когда уже не остаются незаконченные запросы, костлявая, что призывается, когда заканчивает быть загруженным batch. Это в самом деле событие, противопоставленное в ajaxStart.

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

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

Этот setup будет глобальным, так как оба события глобальные: Каждый раз, когда начался запрос ajax (путь jQuery) он будет призван ajaxStart. и каждый раз, когда нет больше незаконченных запросов он будет призван ajaxStop.

Документация: События Аякс

0
ответ дан 03.12.2019, 17:40
  • 1
    Если я funcionó! :) Большое спасибо привет! –  16.01.2017, 16:46

Теги

Похожие вопросы