CODEWITHSUNDEEP
jqueryajaxasp.net-ajax
user210757
user210757

Reputation: 7386

Losing css class added through jquery on updatepanel partial postback

I'm using ASP.NET Ajax with JQuery. I have a click event that adds/removes css classes on objects in an UpdatePanel, but when the ASP.NET Partial postback occurs, I lose the "state." Here is minimal example I tried to create; how do I keep the css class state? 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!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>

    <style type="text/css">
        .active { background: #000000; color: #ffffff; }
        .test {}
    </style>


    <script src="jquery-1.3.2.js" type="text/javascript"></script> 

    <script language="javascript" type="text/javascript">

        function pageLoad(sender, args) {

            // rebind events lost in partial postback
            $(".test").unbind();

            $(".test").click(function() {

                $(".test").removeClass("active");
                $(this).addClass("active");

            });

        }

    </script>








</head>
<body>
    <form id="form1" runat="server">


    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:Timer ID="Timer1" runat="server" Interval="30000" ontick="Timer1_Tick">
    </asp:Timer>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>

    <ContentTemplate>


    <div class="test">

        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

    </div>


    <div class="test">

        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

    </div>

    </ContentTemplate>
    </asp:UpdatePanel>

    </form>
</body>
</html>

Upvotes: 1

Views: 12145

Answers (3)

Wim Naessens
Wim Naessens

Reputation: 1

Example from Zincorp didn't work for me. I had to put the sys.webform lines in a seperate function that I had to bind to the onload event of the body page:

function load()

{Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ReapplyState); }

and in the body tag add onload=”load()”

courtesy of https://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-updatepanel-asychronous-ajax-request-is-over/

Upvotes: 0

zincorp
zincorp

Reputation: 3282

Look into using the client PageRequestManager events to save/restore state (note, the following is JavaScript):

function SaveState(sender, args) 
{
  // code to save state of update panel controls
}

function ReapplyState(sender, args)
{

  // code to reapply state of update panel controls
}

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(SaveState);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(ReapplyState);

Upvotes: 3

3Dave
3Dave

Reputation: 29051

The updatepanel replaces the DOM within its scope, so any modifications you make won't persist between postbacks.

You might look into jQuery "live" events which (supposedly - I haven't tried) reapply themselves when new elements are added into the document.

Upvotes: 0

Related Questions