.net Ajax - hiding content on update

Question

I have a number of asp.net AJAX update panels on a page, that can be refreshed independantley. I would like it so that when the refresh button is used, the content in the panel is hidden, and only the loading image is displayed while data is fetched (it takes 5-10 seconds for data to come back from the server). What is the best way to achieve this?

Answer 1

Is the loading image placed at the same location as the updatepanel?

If thats the case just make the loading panel cover the whole updatepanel.

Answer 2

Use CSS to set the "display" property to none while loading, and set it back to "inline" or "block" when your values are returned from the AJAX panel.

Answer 3

You can use JavaScript to hide/show the panel on the begin and end functions of the RequestHandler:

var panel = new Sys.UI.Control($get("myUpdatePanel"));

function beginRequestHandler(sender, args) {            
    panel.set_visible(false); 
}

function endRequestHandler(sender, args) {
    panel.set_visible(true); 
}

Answer 4

<div class="overlay">
<img src="/...." alt="Loading" />
<div class="your_content">

</div>
</div>

You can set z-index of your_content to value less than overlay z-index after you get complete event, you could set all values to default range.