How to show a hidden element with jQuery

Question

I have a busy icon on my page which has a class of "hidden". When the user clicks a button to start processing input data, I want to show the busy icon. I am doing this with

$("#busy").removeClass("hidden");

Immediately after removing the hidden class, I use AJAX to get some data from the server, display it on the page and add the hidden class back to the busy image.

My problem is that the busy icon is never displayed. I'm not a javascript/jQuery expert but I think this is because the page isn't redrawn until after the script has finished executing?

How can I get the busy icon to display while the AJAX processing is in progress?

Answer 1

Try this

First u link ur image on a div

Then

Try this, it will work fine

$.ajax({
   url : "URL",
   data: { data },
   beforeSend: function(){
     $("#loading").show();
   },
   complete: function(){
     $("#loading").hide();
   },
   success:  function (response) {

   });
});