How to execute code when starting and finish an ajax

Question

How to execute code when starting and finish an ajax

Navigation

#1 by (2 votes)

1

I tell you, I'm working on a preloader that loads a div with every ajax request, I checked the jquery documentation and found the ajax event handler and implemented it, but I have a problem, the ajaxStart, just loads the gif in the first request ajax, the rest of requests do not load ... But beware! is only with the div, because I put them console.log with a message and there if you do all the ajax requests that I run, its corresponding message appears, and that is what drives me crazy !!! I attach the code. Thanks in advance.

  <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>'

html css ajax web

asked by Carlos Méndez 28.03.2018 в 18:58

source

1 answer

Matrix with changing data and time steps Error in wordpress site due to expired SSL

score 2 · Answer 1

ajaxStart is called when the first ajax request is logged. If there are other concurrent calls, they do not "execute" the ajaxStart again.

On the other hand ajaxStop is called when all concurrent ajax requests have ended.

Here I leave an example to make it clearer.

$(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>

What you are looking for I think is, ajaxSend and ajaxComplete that are executed for each of the ajax requests regardless of whether or not they are concurrent.

Additionally, if you want to know how many active calls remain in each execution of ajaxComplete you can see it through $ .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>