jquery ajaxstart ajaxstop show hide

Question

As usually seemingly simple things take days to resolve, maybe someone could point me to a solution but after 2 days I give up on the following problem;

In html, in a form I have a button that is supposed to trigger loading of data through ajax call:

<button type="" class="btn" onclick="getData(); return false;">Show Data</button>

in javascript:

$(document).ajaxStart(function() {
    $("#qloader").show();
}).ajaxStop(function() {
    $("#qloader").hide('slow');
});

and in html div with id qloader is defined with 100% width and height and spinner centered as the background, z-index above other:

<div id="qloader" class="myLoader" >&nbsp;</div>

Now, when page loads, ajax call is executed to get initial data, qloader div is brought up and it shows the spinner - animated, after ajax call finishes, qloader is hidden by ajaxStop.

Next, when I click on a button (show data) to initiate another ajax call, ajaxStart is triggered, but it does not show qloader, it waits until ajaxStop is triggered and then in a blink of eye it shows qloader and hides it.

I suspected that ajaxStart is not executed, so I put alert before $("#qloader").show(), then alert would be displayed and after that qloader WOULD be displayed BUT spinner animation would be suspended - no spinning, and after ajaxStop it would get hidden.

Without alert in ajaxStart trigger, in subsequent ajax calls div is not shown until just before ajaxStop is triggered.

It works fine for the first ajax call, but for subsequent ajax call triggered by click on form button it does not work.

Any idea what is wrong with this setup?

In getData() is just ajax call for data. However, I discovered, that if I remove ajaxStart and ajaxStop code and ajax calls complitely, and if in on.click event I call $('#qloader').show() then wait couple of seconds before I call $('#qloader').hide again qloader div is not displayed. It seems it has nothing to do with ajax (which executes fine btw). I will prepare soon complite version for online viewing so you can check yourselves. — sasha, Aug 31 '12 at 10:00

score 0 · Answer 1 · answered Feb 16 '17 at 12:12

In the below link have an example get data on load and get data on click of the button. This is working properly.

In your code "return false" is not required on click on button if button is not type submit

$(document).ajaxStart(function() {
  $("#qloader").show();
}).ajaxStop(function() {
  $("#qloader").hide('slow');
});
$(document).ready(function() {
  getData();
})

.myLoader{
    width:100%;
    height:500px;
    background-color:blue;
    opacity:0.5
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>

  <button type="button" class="btn" onclick="getData(); return false;">Show Data</button>
</form>
<div id="qloader" class="myLoader" style="display:none">Loading...</div>
<script>
  function getData() {
    $.post("/echo/json", {
      "json": JSON.stringify({
        "test": "test"
      })
    });
  }
</script>

.

score 0 · Answer 2 · answered Jun 29 '20 at 20:34

Normal sleep will not work. Please try below , it is tested and working 100%.

$("#showData").click(function(event){
    $("#qloader").show();
    setTimeout(function(){
        //Do what the button normally does
        $("#qloader").hide('slow');
    }, 10000);          
});

Cheers.

score 0 · Answer 3 · answered Jul 26 '22 at 10:58

You can use beforeSend and complete method of ajax

getData(){
  jQuery.ajax({
      type: "POST",
      url: 'Your url',
      data: 'your data',
      beforeSend: function () {
        $("#qloader").show();
      },
      success: function (a) {
        
      },
      complete: function () {
        $("#qloader").hide('slow');
      }
    });
}

score -1 · Answer 4 · answered Aug 28 '12 at 15:36

-1

Your button click event handler is not right. return false will not prevent the default behavior, that is just a jQuery thing. So I would do.

$('.btn').on( "click" , function( event ){
   getData();
   return false;
});

This is a working example. http://jsfiddle.net/FuFHe/

answered Aug 28 '12 at 15:36

arhea

454
2
5

"return false will not prevent the default behavior, that is just a jQuery thing." That's completely untrue. – Anthony Grist Aug 28 '12 at 15:43
http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false, http://stackoverflow.com/questions/4924036/return-false-on-addeventlistener-submit-still-submits-the-form – arhea Aug 28 '12 at 16:14
I tried this, it works, except, form gets submitted and it should not. – sasha Aug 30 '12 at 19:58
my mistake, form is not submited, but the problem remains. I will test more and get back with results. – sasha Aug 30 '12 at 20:22
no luck, this does not solve the problem. these are console log lines: `START test:17 Element display: block test:17 Element z-index: 10 test:17 STOP test:17 START test:17 Element display: block test:17 Element z-index: 10 test:17 STOP ` at first start loader is displayed, at the moment of second start display is set to block for loader but nothing is displayed. – sasha Aug 30 '12 at 22:14

jquery ajaxstart ajaxstop show hide

4 Answers4