Hiding UpdatePanel during UpdateProgress ( jQuery and asp.net )

This is a small tutorial on hiding an update panel during update progress.

Required:
1. jQuery UpdatePanel plugin ( http://plugins.jquery.com/project/updatepanelplugin )
2. Ajax control toolkit ( http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ )

Step 1: Include your jQuery script and jQuery UpdatePanel plugin in the head content of your html page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.updatepanel.js"></script>

Step 2: Register the ajax control toolkit

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

Step 3: Add the ToolScript Manager, UpdateProgress and UpdatePanel along with the contents you want within the UpdateProgress and UpdatePanel. In my example, I am just using a gif image to show in progress. My UpdatePanel will contain a search button which calls my code behind. And a gridview to populate search results. You can have anything inside the UpdatePanel.

<!-- Tool script manager -->
<ajaxcontroltoolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajax:ajaxcontroltoolkit>

<!-- Update Progress indicator -->
<asp:UpdateProgress runat="server" ID="PageUpdate" AssociatedUpdatePanelID="SearchResultsPanel">
    <ProgressTemplate>
        <asp:Image runat="server" ID="SearchImage" ImageUrl="~/images/loading/ajax-loader.gif" />
    </ProgressTemplate>
</asp:UpdateProgress>

<!-- Update Panel -->
    <asp:UpdatePanel runat="server" ID="SearchResultsPanel" EnableViewState="true">
    <ContentTemplate>
        <asp:Button runat="server" ID="Search" Text="Search" Width="70px" OnClick="Search_Click" />
        <asp:GridView ID="SearchGrid" runat="server" EmptyDataText="No records found." />
    </ContentTemplate>
</asp:UpdatePanel>

Step 4: Include the Javascript that hides the UpdatePanel

<script type="text/javascript">
$(document).ready(function () {
    //This is to fade out the UpdatePanel
    $("#<%=SearchResultsPanel.ClientID%>").beginRequest(function () {
        $("#<%=SearchResultsPanel.ClientID%>").fadeOut();   
    });
    //This is to fade in the UpdatePanel
    $("#<%=SearchResultsPanel.ClientID%>").panelUpdated(function () {
        $("#<%=SearchResultsPanel.ClientID%>").fadeIn();});
    });
</script>

Pretty simple :)
Cheers