The reason your jQuery stops working is because all of the controls your events are attached to are destroyed then re-created when the updatepanel fires. You need to bear this in mind when attaching your events.
<%@ Page Language="C#" Inherits="WebTest.UpdatePanel" Codebehind="UpdatePanel.aspx.cs" %>
<!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></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
LabelTimeA.Text = LabelTimeB.Text = DateTime.Now.ToString();
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<h2>Attach events using jQuery</h2>
<p>
In this example we attach mouseover events to the time label. However the updatepanel
removes and replaces the UpdatePanel's content. The jQuery events were attached to the
elements that were originally loaded, but they have gone and have been replaced with new
elements that don't have the jQuery events attached, so the mouseover no longer
works after the update.
</p>
<asp:UpdatePanel ID="UpdateA" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="LabelTimeA" runat="server" /><br />
<asp:Button ID="ButtonUpdateA" runat="server" Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=LabelTimeA.ClientID %>').mouseover(function () { $(this).css('font-weight', 'bold'); });
$('#<%=LabelTimeA.ClientID %>').mouseout(function () { $(this).css('font-weight', 'normal'); });
});
</script>
<h2>Attach events using PageRequestManager</h2>
<p>
In this example we attach the mouseover events via the PageRequestManager object. The
difference with this object is that it knows when the updatepanel has been triggered
so its pageLoaded event fires not only on the initial load, but also on the updatepanel
being triggered. The updatepanel is removing the elements with the events attached as
with the example above, however the add_pageLoaded event is now being fired so they are
being re-attached after the updatepanel has replaced them.
</p>
<asp:UpdatePanel ID="UpdateB" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="LabelTimeB" runat="server" /><br />
<asp:Button ID="ButtonUpdateB" runat="server" Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
function pageLoad() {
$('#<%=LabelTimeB.ClientID %>').mouseover(function () { $(this).css('font-weight', 'bold'); });
$('#<%=LabelTimeB.ClientID %>').mouseout(function () { $(this).css('font-weight', 'normal'); });
}
</script>
</form>
</body>
</html>
Submit an article or tip