I have Accordion control under UpdatePanel. I also use Repeater inside Accordion. I want to load some data after clicking the button "Get Data" and when it finished to load - show data with fade effect. When I press another time "GetData" - hide current data with fade effect and show loading image. But in my case all work fine except fade effect...
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddNewComputer.aspx.cs"
Inherits="WakeOnLan.AddNewComputer" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Wake On LAN : Add New Computer</title>
<link rel="Stylesheet" href="css/default.css" media="all" />
</head>
<body id="body1" runat="server">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div class="mainContent">
<h2>Add New Computer</h2>
<br />
<br />
<table style="width: 500px;">
<tr>
<td class="formLabel">
PC Hostname or IP:
</td>
<td class="formInputText">
<asp:TextBox ID="txtHostnameOrAddress" runat="server" MaxLength="50"></asp:TextBox>
</td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:Accordion ID="AccordionCtrl" runat="server" SelectedIndex="0"
AutoSize="None" FadeTransitions="true" TransitionDuration="250" FramesPerSecond="40">
<Panes>
<cc1:AccordionPane ID="AccordionPane0" runat="server" >
<Content>
<asp:Repeater ID="repeatParameters" runat="server" OnItemDataBound="repeatParameters_ItemDataBound">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td class="formLabel">
<asp:Label ID="lblID" runat="server"></asp:Label>
</td>
<td class="formInputText">
<asp:Label ID="lblValue" runat="server"></asp:Label>
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr>
<td class="formLabel">
<asp:Label ID="lblID" runat="server"></asp:Label>
</td>
<td class="formInputText">
<asp:Label ID="lblValue" runat="server"></asp:Label>
</td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<asp:Label ID="lblMessage" runat="server" Text="" ForeColor="Red"></asp:Label>
</Content>
</cc1:AccordionPane>
</Panes>
</cc1:Accordion>
<div class="formField text">
<table>
<tr>
<td>
<asp:Button ID="btnPing" runat="server" Text="Get Info" OnClick="btnPing_Click" />
</td>
<td width="70px" height="70px">
<asp:UpdateProgress ID="UpdateProgress2" runat="server">
<ProgressTemplate>
<img border="0" src="images/loading.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Add Computer" Enabled="False" OnClick="btnSubmit_Click" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
And here is JavaScript from code behind.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ClientScript.RegisterStartupScript(this.GetType(), "DisableButton",
"<script type=text/javascript>" +
"var pbControl = null;" +
"var prm = Sys.WebForms.PageRequestManager.getInstance();" +
"prm.add_beginRequest(BeginRequestHandler);" +
"prm.add_endRequest(EndRequestHandler);" +
"function BeginRequestHandler(sender, args)" +
"{" +
"pbControl = args.get_postBackElement();" + //the control causing the postback
"pbControl.disabled = true;" +
"hideAccordionPane(0);" +
"}" +
"function EndRequestHandler(sender, args)" +
"{" +
"pbControl.disabled = false;" +
"pbControl = null;" +
"changeSelected(0);" +
"}" +
"function hideAccordionPane(paneno)" +
"{" +
"$find('AccordionCtrl_AccordionExtender').get_Pane(paneno).header.style.display=\"none\";" +
"$find('AccordionCtrl_AccordionExtender').get_Pane(paneno).content.style.display=\"none\";" +
"}" +
"function changeSelected(idx)" +
"{" +
"$find('AccordionCtrl_AccordionExtender').set_SelectedIndex(idx);" +
"}" +
"</script>");
}