How to show spinner while a servlet receives a call, receives data from a server?

Question

In the following code, I make a request to get a servlet and assign it the result of a javascript variable, it takes about 1 minute to get the data. I would like to know how to load the counter until the request for receipt is complete. Please help me.

var myJSONObject = null; function getJsonData(){ $.get("getData", function(data) { myJSONObject = data; }); 

Answer 1

Thanks to everyone. I found a solution:

HTML code:

 <div id="spinner" class="spinner" style="display:none;"> Getting value. Please wait....<br> <img id="img-spinner" src="loader.gif" alt="Loading"/> </div> $(document).ready(function(){ $("#spinner").bind("ajaxSend", function() { $(this).show(); }).bind("ajaxStop", function() { $(this).hide(); }).bind("ajaxError", function() { $(this).hide(); }); }); 

Answer 2

Use

 $('#loadingDiv') .hide() // hide it initially .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }) ; 

where loadDiv is your spinner div. Set loadDiv css as

 #loading { width: 100%; height: 100%; position: fixed; opacity: 1; z-index: 99; margin: auto; } 

And in the loading div place the loader gif.

Answer 3

Try the following:

 function getJsonData() { var spinner = $('<img src="spinner.gif"/>').addClass('spinner'). appendTo('body'); $.get("getData", function(data) { myJSONObject = data; spinner.remove(); }); }