1

les comento,estoy trabajando en un preloader que cargue un div con cada petición ajax, ya revisé la documentación de jquery y encontré el manejador de eventos de ajax y lo implementé, pero tengo un problema, el ajaxStart, solo carga el gif en la primera peticion ajax, el resto de peticiones no las carga... Pero ojo! es solamente con el div, porque les pongo console.log con un mensajito y ahí si tooodas las peticiones ajax que ejecuto aparece su mensaje correspondiente, y eso es lo que me vuelve loco!!! Adjunto el código. Gracias de antemano.

  <div class="gifdecarga" id="gifdecarga" style="display:none">

      <img src="plantillas/images/sololetras.svg" alt="contableniifimagen" width="300px" style="position:absolute;" id="otraimagen">
      <div class="preloader"> <p>Cargando Informacion...</p> </div>

      <div class="div-bolita">
        <img src="plantillas/images/logonormal.svg" alt="" id="bolita">
      </div>

  </div>

<script type="text/javascript">

$(document).ajaxStart(function(){$('#gifdecarga').show()});
$(document).ajaxStop(function(){$('#gifdecarga').hide()});

</script>`

1 respuesta 1

3

ajaxStart se llama cuando la primera petición de ajax se registra. Si hay otras llamadas concurrentes estas no vuelven a "ejecutar" el ajaxStart.

Por otro lado ajaxStop se llama cuando todas las peticiones concurrentes de ajax terminaron.

Acá dejo un ejemplo para que quede mas claro.

$(document).ajaxStart(function(){
  $('#gifdecarga').show()
  console.log('inicio del primer ajax');
});

$(document).ajaxStop(function(){
  $('#gifdecarga').hide()
  console.log('Terminaron todas las llamadas ajax');
});

for(var i=0; i<10; i++){
  $.ajax({
    url: "test.html",
  }).done(function() {

  }).fail(function(){
    console.log("error")
  });
}
.preloader{
  padding: 10px 15px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gifdecarga" id="gifdecarga" style="display:none">
    <div class="preloader"> <p>Cargando Informacion...</p> </div>
</div>

Lo que vos estas buscando creo yo es, ajaxSend y ajaxComplete que se ejecutan para cada una de las peticiones de ajax independientemente de si son concurrentes o no entre ellas.

Adicionalmente si quieres saber cuantas llamadas activas restan en cada ejecución de ajaxComplete puedes verlo a través de $.active

$(document).ajaxSend(function(){
  $('#gifdecarga').show()
  console.log('inicio ajax');
});

$(document).ajaxComplete(function(){
  $('#gifdecarga').hide()
  console.log('Termino ajax');
  console.log('Lamadas activas: '+$.active)
});

for(var i=0; i<10; i++){
  $.ajax({
    url: "test.html",
  }).done(function() {

  }).fail(function(){
    console.log("error")
  });
}
.preloader{
  padding: 10px 15px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gifdecarga" id="gifdecarga" style="display:none">
    <div class="preloader"> <p>Cargando Informacion...</p> </div>
</div>

2
  • Aún con ej ajaxSend y ajaxComplete solo ejecuta el gif una sola vez con la primera peticion ajax... Verás, yo tengo un menú y la carga de informacion al div "contenedor", la manejo con ajax, cuando doy click por primera vez despues de refresacada la página, carga el gif, pero si vuelvo a darle click o le doy a otro, entonces no vuelve a cargar. Seguí el ejemplo que me dijiste y no me funciono u_u el 28 mar. 2018 a las 19:39
  • podrías poner todo tu código en la pregunta para que podamos tratar de ver que es lo que pasa. el 29 mar. 2018 a las 15:26

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.