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>
Add a new PC to appear on your monitoring page. If the PC you want to add is the
PC you are currently using you probably don't need to do anything on this screen
other than click 'add'.
<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>");
}