0

I have some divs in my ASP.NET page that live inside of an update panel which collapse and expand when a user clicks on them. From Googleing around, I've got it wired up so that the expanding and collapsing on click works okay inside the update panel...like so:

 $(document).ready(function () {
            $("a.groupBtn").click(function () {
                $(this).parent().next(".device-list").slideToggle("fast");
            });
        });

        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            $("a.groupBtn").click(function () {
                $(this).parent().next(".device-list").slideToggle("fast");
            });
        });

This all works okay, but the problem I'm having is every time the Update Panel ticks, the divs return to their default state, which is collapsed. Is there any way to wire this up so that the divs will remember their state whenever the update panel ticks?

EDIT: Here is my page. The divs are programatically generated inside of UpdatePanel3.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="DashboardFrontEnd.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

     <script type="text/javascript">
         $(document).ready(function () {
             $("a.groupBtn").click(function () {
                 $(this).parent().next(".device-list").slideToggle("fast");
                 var $hState = $(".div-state");
                 var val = ($hState.val() || 0) == 1;
                 $hState.val(!val);
                });
            });


         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_endRequest(function () {
             var $hState = $(".div-state");
             var val = $hState.val() == 1;
             if (val)
                 $(this).parent().next(".device-list").show()
             else
                 $(this).parent().next(".device-list").hide();
        });
</script>


<div class="topBar">&nbsp;</div>
    <div class="wrapper">
        <img src="img/summit-logo-website.png" />
        <div id="stack-title">Network Monitor Dashboard</div>
        <hr />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="redPnl" runat="server" CssClass="panel red" Visible="False" Direction="LeftToRight"></asp:Panel>
                    <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="5000">
                    </asp:Timer>
                </ContentTemplate>

            </asp:UpdatePanel>

        <br />

            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="yellowPnl" runat="server" BackColor="#FFCC00" CssClass="panel" Visible="False"></asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>

        <br />

            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                <ContentTemplate>
                <input runat="server" class="div-state" />
            <div id="device-list">
                <asp:Panel ID="greenPnl" runat="server" CssClass="panel">
                </asp:Panel>
            </div>
                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Panel ID="Panel1" runat="server" Direction="RightToLeft" CssClass="right device-detail" Visible="False">
                        <asp:Label ID="Label4" runat="server" Text="Label" Font-Size="Medium"></asp:Label><br />
                        <asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="False" Font-Size="Medium"></asp:Label><br />
                        <asp:Label ID="Label2" runat="server" Text="Label" Font-Bold="False" Font-Size="Medium"></asp:Label>
                        <br />
                        <asp:Label ID="Label3" runat="server" Text="Label" Font-Bold="True" Font-Size="Larger"></asp:Label>
                    </asp:Panel>

                </ContentTemplate>
            </asp:UpdatePanel>




    </div>
</form>

4
  • Does the update panel tick re-render the entire page? Sep 24, 2014 at 12:21
  • No, just the content inside the update panel, which happens to be my divs
    – gev125
    Sep 24, 2014 at 12:23
  • There is probably many ways to solve this issue. The quick and dirty is to store the state in DOM elements outside the panel. And how about using to-way binding with another JS-framework, for example Knockoutjs? If you two-way bind the state, it will save the state until you reload the JavaScript file Sep 24, 2014 at 12:29
  • Is it possible to give the div's the attribute runat="server" so that their state information is sent to the server on the AJAX postback and saved?
    – Stryner
    Sep 24, 2014 at 12:33

1 Answer 1

0

I can use HiddenField (outside UpdatePanel) for stored the state of the DIV and manage the event endRequest for asyc request. Put the hidden field in the container of the UpdatePanel

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="DashboardFrontEnd.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

     <script type="text/javascript">
         $(document).ready(function () {
             $("a.groupBtn").click(function () {
                 $(this).parent().next(".device-list").slideToggle("fast");
                 var $hState = $(".div-state");
                 var val = ($hState.val() || 0) == 1;
                 $hState.val(!val);
                });
            });


         var prm = Sys.WebForms.PageRequestManager.getInstance();
         prm.add_endRequest(function () {
             var $hState = $(".div-state");
             var val = $hState.val() == 1;
             if (val)
                 $(this).parent().next(".device-list").show()
             else
                 $(this).parent().next(".device-list").hide();
        });
</script>


<div class="topBar">&nbsp;</div>
    <div class="wrapper">
        <img src="img/summit-logo-website.png" />
        <div id="stack-title">Network Monitor Dashboard</div>
        <hr />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="redPnl" runat="server" CssClass="panel red" Visible="False" Direction="LeftToRight"></asp:Panel>
                    <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="5000">
                    </asp:Timer>
                </ContentTemplate>

            </asp:UpdatePanel>

        <br />

            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <asp:Panel ID="yellowPnl" runat="server" BackColor="#FFCC00" CssClass="panel" Visible="False"></asp:Panel>
                </ContentTemplate>
            </asp:UpdatePanel>

        <br />
            <input runat="server" class="div-state" />
             <!-- THE HIDDEN FIELD MUST BE OUTSIDE THE UPDATE PANEL -->
            <asp:UpdatePanel ID="UpdatePanel3" runat="server">
                <ContentTemplate>
               
            <div id="device-list">
                <asp:Panel ID="greenPnl" runat="server" CssClass="panel">
                </asp:Panel>
            </div>
                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Panel ID="Panel1" runat="server" Direction="RightToLeft" CssClass="right device-detail" Visible="False">
                        <asp:Label ID="Label4" runat="server" Text="Label" Font-Size="Medium"></asp:Label><br />
                        <asp:Label ID="Label1" runat="server" Text="Label" Font-Bold="False" Font-Size="Medium"></asp:Label><br />
                        <asp:Label ID="Label2" runat="server" Text="Label" Font-Bold="False" Font-Size="Medium"></asp:Label>
                        <br />
                        <asp:Label ID="Label3" runat="server" Text="Label" Font-Bold="True" Font-Size="Larger"></asp:Label>
                    </asp:Panel>

                </ContentTemplate>
            </asp:UpdatePanel>




    </div>
</form>

11
  • Thanks for the answer. You're above my head though as I'm by no means a jQuery expert. Where would I put this code and what kind of code do I need to use to Restore Prev State?
    – gev125
    Sep 24, 2014 at 13:08
  • Fabio, I tried your code and the divs expand initially like they are supposed to and then collapse by themselves when the update panel ticks, then its like the expand functionality dies..no matter how many times I click on them, they will not expand again. Do you have any more ideas on how I can get this working?
    – gev125
    Sep 24, 2014 at 19:12
  • Can you post your page?
    – Fabio
    Sep 25, 2014 at 6:46
  • I've edited my original post to show my page. Let me know if you want to see the CSS or the code-behind.
    – gev125
    Sep 25, 2014 at 14:39
  • Ok, the the hidden field must be outside the updatepanel else you lost the state when the updatepanel comes refreshed
    – Fabio
    Sep 26, 2014 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.