UpdatePanel Gotcha
Do not update the contents inside a UpdatePanel with java script. You will not get the resuts you expect.
For example place a span and button inside an update panel.When you click on a button control the java script onClientClick will fire followed by the Click event for the button. So if we update the span's text with onClientClick the text will update briefly then the UpdatePanel will catch the post back made by the click event and erase our changes.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="Microsoft.Web.UI" TagPrefix="asp" %>
<!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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function displayClick()
{
$get("span1").innerHTML="Hello World";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<span id="span1"></span>
<br />
<asp:linkButton runat="server" Text="Button" ID="button1" OnClientClick="displayClick();" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
By moving the Span outside the update panel we will still be able to update the contents of the span without posting back. The UpdatePanel still prevents the pages postback.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="Microsoft.Web.UI" TagPrefix="asp" %>
<!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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function displayClick()
{
$get("span1").innerHTML="Hello World";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<span id="span1"></span>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton runat="server" Text="Button" ID="button1" OnClientClick="displayClick();" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>