[RESOLVED] remembering div tag state

**jakkjakk** · Dec 16th, 2010, 01:25 AM

Hi guys,
I'm trying to make a div tag retain its state through postback. here's my code

Code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
    
  <button id="bsub3" onclick="return bsub3_onclick()">Toggle</button>
  <button id="bsub5">Different</button>

<script>

    $('#bsub3').click(function () {
        $('#sub3').toggle();

    });

    $('#bsub5').click(function () {
        $('#blah').toggle();
    });

</script>
    <form runat="server"> 
    <asp:Button ID="Button1" runat="server" Text="refresh" />
    </form>
<div id="sub3" style="display: none">Message Box</div>
<div id="blah" style="display: none">
<p>a;lksdjfl;aksdjfaskdfjk;alsdjflksdjfj;kl
asdflkjas;dkfjas;dkfjas;dlkfjasdl;kfjdf
adslf;kja;lsdkjf;ladksjfa;lsdkfjasl;dkjfa
asd;fkjas;lkfjasd;lkfjdsklfj</p>
</div>
</body>
</html>

Now if you click the "toggle" button div tag id sub3 will display. If you click different button div tag blah will display.
If you click refresh then both the toggle and different div tags disappear. Is there a way so that when you click refresh that the both div tags stay visible through the postback?

**danasegarane** · Dec 16th, 2010, 05:24 AM

What do you want to do in refresh button click event ?

**jakkjakk** · Dec 16th, 2010, 12:04 PM

for this example nothing. But after you click the refresh button I wan the div tags to be in the same state as they were before the user clicked the refresh button. You can use the refresh button to get the div tags to restore to the before postback state if you want.

**gep13** · Dec 18th, 2010, 01:57 PM

You would need to set something, either in a session variable, or in view state, which you can then use to remember which div's are visible, and which aren't, and you can toggle these when the page loads.

Gary

**jakkjakk** · Dec 20th, 2010, 10:45 AM

someone over at asp.net forum said something about IPostBackHandler interface. Anyone know anything about it? I've done a preliminary search of it and haven't seen any simple good examples.

**gep13** · Dec 20th, 2010, 11:51 AM

Hey,

I can't say that I have ever used that class, so I don't know anything about it, but from what you have described, I don't see why there would be a need for it here.

Gary

**jakkjakk** · Dec 20th, 2010, 01:38 PM

Can you give me a simple example of using a session variable or viewstate because I've only used them from the server side. I haven't used them from the client to server and then back again.

Maybe I"m thinking about it wrong because when the user clicks a submit button and fires the page load event. I could pull up the div tag from the request.form("div tag name") then set that to a varible from code behind. Is that right?

**gep13** · Dec 20th, 2010, 01:47 PM

Hey,

Thinking about it, I think one approach that you could use here would be to write to a hidden field on the page when you click the toggle button. Then, when the page is submitted, you can read the value from the hidden field, and then reload the div's with the appropriate state.

Remember, in order to do that, you will have to set the runat=server flag on the div's so that you can reference them from the server.

Gary

**jakkjakk** · Dec 20th, 2010, 02:12 PM

If I set the div tag to server won't that make it so that every time I click the button that hides and shows the div tag cause a page refresh?

What I'm trying to do is have the user click an html input button control on the client side to control the div tag so that it is displayed or hidden. Then when the user clicks a different button that causes a postback have something to remember if the div tag is either shown or hidden.

**gep13** · Dec 20th, 2010, 02:30 PM

No, that won't happen. Give it a try, you'll see.

Gary

**jakkjakk** · Dec 20th, 2010, 11:27 PM

Hmm... Can you provide a simple example? I just don't see how this would work because how does the html button which is client based set the value of the hidden field which is server based?

I used this as a base for my code. The example from here:
http://quickstarts.asp.net/QuickStar...ddenField1.src
I tried this:

<html>
<head>
<script language="VB" runat="server">
Sub Button1_Click(sender As Object, e As EventArgs)
if (HiddenField1.Value = Nothing)
HiddenField1.Value = "0"
end if

'Increment the hidden field value by 1
HiddenField1.Value = Convert.ToInt32(HiddenField1.Value)+1

Label1.Text = HiddenField1.Value
End Sub
</script>

<script type="text/javascript" src="Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.7.custom.min.js"></script>
<script language="javascript" type="text/javascript">
// <![CDATA[
$(function () {
$('#Button2').click(function () {
$('#mydiv').visible = true;
});
});
// ]]>
</script>

</head>
<body>

<h3><font face="Verdana">HiddenField</font></h3>

<form runat=server>
<asp:HiddenField id=HiddenField1 runat=Server />

<asp:Button id=Button1 Text="Click Me" onclick="Button1_Click" runat="server" />
Clicked <asp:Label id=Label1 Text="0" runat=server /> times
</form>

<input id="Button2" type="button" value="button" />

<div id="mydiv" name="my" runat="server" visible="False">
mydiv is visible
</div>

</body>
</html>

**gep13** · Dec 21st, 2010, 02:51 AM

Hello,

As a VERY quick example, have a look at this:
Code Behind:

Code:

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Me.Button1.Attributes.Add("onclick", "setHiddenField('" + Me.HiddenField1.ClientID + "');")
        Else
            Me.Label1.Text = Me.HiddenField1.Value
        End If
    End Sub

End Class

ASPX:

Code:

<&#37;@ Page Language="vb" AutoEventWireup="false" Codebehind="Default.aspx.vb" Inherits="JakkJakk._Default" %>

<!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" language="javascript">
    function setHiddenField(clientID)
    {
        var hiddenField = document.getElementById(clientID);
        hiddenField.value = "put whatever value you want here";
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <input id="Button1" type="button" value="Set Hidden Value" runat="server" />
            <asp:Button ID="Button2" runat="server" Text="Perform PostBack" />
        </div>
    </form>
</body>
</html>

Hope that helps!

Gary

**jakkjakk** · Dec 21st, 2010, 11:10 AM

ahhh I'll try that thanks gary.

**gep13** · Dec 21st, 2010, 11:19 AM

Not a problem at all.

Let me know how you get on.

Gary

**jakkjakk** · Dec 22nd, 2010, 01:40 AM

I actually figured a better way to do this. Collasible Panels. But instead of a panel use a button.

Like this:

Code:

            <asp:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server">
</asp:ScriptManager>

    <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="Server" 
            TargetControlID="Panel2"
            ExpandControlID="customEnable" 
            CollapseControlID="customEnable" 
            Collapsed="True"
            TextLabelID="Label3" 
            ExpandedText="(Hide Details...)" 
            CollapsedText="(Show Details...)"
            ImageControlID="Image1" 
            ExpandedImage="~/images/collapse_blue.jpg" 
            CollapsedImage="~/images/expand_blue.jpg"
            SuppressPostBack="true">
    </asp:CollapsiblePanelExtender>

 <asp:Button ID="customEnable" runat="server" Text="Custom" /> <br />   
    <asp:Panel ID="Panel2" runat="server" CssClass="collapsePanel" 
        Width="879px" ForeColor="Black">
blah blah blah     
<asp:Button ID="Button2" runat="server" Text="test" />
    </asp:Panel>

TargetControlID="Panel2"
ExpandControlID="customEnable"
CollapseControlID="customEnable"
Collapsed="True"
TextLabelID="Label3"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="Image1"
ExpandedImage="~/images/collapse_blue.jpg"
CollapsedImage="~/images/expand_blue.jpg"

These don't need to be panels. They can be anything you want them to be.

I now got a button "custom" when clicked the "test" button appears when clicked again, test button dissappears. What also is cool is when I click the "test" button I don't need to do any find control crap and I can access that right from the backend code. It's really slick!

**gep13** · Dec 22nd, 2010, 03:50 AM

Hey,

Yes, this is a perfectly valid solution. You didn't mention that you were already using AJAX, otherwise I would have suggested it.

Can you remember to mark your thread as resolved?

Thanks

Gary

Thread: [RESOLVED] remembering div tag state

Thread Tools

Display

[RESOLVED] remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Re: remembering div tag state

Posting Permissions