[RESOLVED] remembering div tag state
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?
Re: remembering div tag state
What do you want to do in refresh button click event ?
Re: remembering div tag state
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.
Re: remembering div tag state
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
Re: remembering div tag state
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.
Re: remembering div tag state
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
Re: remembering div tag state
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?
Re: remembering div tag state
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
Re: remembering div tag state
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.
Re: remembering div tag state
No, that won't happen. Give it a try, you'll see.
Gary
Re: remembering div tag state
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:
Quote:
<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>
Re: remembering div tag state
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:
<%@ 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
Re: remembering div tag state
ahhh I'll try that thanks gary.
Re: remembering div tag state
Not a problem at all.
Let me know how you get on.
Gary
Re: remembering div tag state
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!
Re: remembering div tag state
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
