CODEWITHSUNDEEP
jqueryspinnershow-hide
sasha
sasha

Reputation: 103

jquery ajaxstart ajaxstop show hide

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?

Upvotes: 3

Views: 11771

Answers (4)

Kaushal Patel
Kaushal Patel

Reputation: 269

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');
      }
    });
}

Upvotes: 0

Krishan Kumar
Krishan Kumar

Reputation: 403

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.

Upvotes: 0

Pankaj Makwana
Pankaj Makwana

Reputation: 3050

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>

.

Upvotes: 0

arhea
arhea

Reputation: 454

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/

Upvotes: -1

Related Questions