He intentado usar ajaxStart y ajaxStop para mostrar un cargador siempre que se carguen todas las funciones.

Consulto todas las URL y envío una solicitud a cada una de ellas, así que hasta que no se carguen todas, no oculte el cargador.

Este es mi código:

$.ajax({
      url: getBaseUri() + 'dashboard/index',
      method: 'GET',
      success:function(data){

    var datas  = data['return'];
    var urls   = [];
    var idDash = [];
    var types  = [];

    /*
     * I go through the data to send the data of each dashboard
     */
    for (var i in datas) {
        //Urls, dashboard ids and descriptions are saved in an array
        urls.push({
            url: datas[i].route,
            id: datas[i].id,
            title: datas[i].privilege,
            div: datas[i].div
        });
        idDash.push(datas[i].id); 
        types.push(datas[i].type); 

        /*
         * I send the parameters to the 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);
    }
  },
  error: function(error){
    console.log(error);
  }
});


function receiveData(url, sign, iconClass, div, title, type, types, idDash, id, urls, label, xaxis, yaxis, background) {


    $.ajax({
      url: url,
      method: 'GET',
      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);
      }
    });
}

He usado esto pero no funciona:

$(".loader").bind("ajaxStart", function () {
      $(".loader").show();
    }).bind("ajaxComplete", function () {
      $(".loader").hide();
    });

No sé si estoy haciendo algo mal, agradeceré cualquier ayuda.

¡Gracias!

-1
Fabian Sierra 13 ene. 2017 a las 18:16

3 respuestas

La mejor respuesta

No está vinculando al elemento correcto; por lo general, debe vincular ajaxStart al documento en sí:

$(document).bind("ajaxStart", function () {
      $(".loader").show();
    }).bind("ajaxComplete", function () {
      $(".loader").hide();
    });

Y un JSFiddle que demuestra esto funciona: http://jsfiddle.net/x196bb4L/1/

0
Stevangelista 13 ene. 2017 a las 15:58

¿Puedes probar

$( document).ajaxStart(function () {
      $(".loader").show();
    });
$( document).ajaxComplete(function() {
  $(".loader").hide();
});

Árbitra

0
K D 13 ene. 2017 a las 15:20

Puede mostrar el cargador en el momento en que activa la llamada ajax y ocultarlo en la devolución de llamada ajax de esta manera:

var loader = $('.loader');
loader.show();
$.ajax({
  ...
  success: function(data) {
     loader.hide();
  },
  error: function() {
     loader.hide();
  }
});
0
kapantzak 13 ene. 2017 a las 15:22