show loading icon in div with jquery

Question

I have a div tag like so

<div id="mainHolder">

<span>asjlkdasjdka</span>
<img src='image.jpg' />
<input type="button" id="myButton" value="Click me" onclick="callWcf();" />

</div>

I am using jquery for my client side development and clicking the button in the div will do some server side processing.

I have callWcf function makes the wcf call and has a succeed and failure function.

What I want to do is that once the button is clicked, hide the content of the mainHolder div and replace it with a spinning image to show the user there is processing happening. And then when its finished, be it success or failure, re show the current content of the div mainHolder.

Anyone help me out implementing this? I would like a general function maybe that I could reuse with other divs and scenarios.

Thanks.

Answer 1

Create two extra divs inside main holder and give it an id of content. and the other div an id of spinner: (style with css as needed as well as hidden)

Then place code below in JS file under dom ready function.

$("#content").bind("ajaxStart", function(){

   // Show Spinner
   $('#content').hide();
   $('#spinner').show();

}).bind("ajaxComplete", function(){

   // Hide Spinner
   $('#content').show();
   $('#spinner').hide();

})