views:

2692

answers:

3

I have a web user control with a hidden field on it. When a javascript event (click) ocurrs, I am trying to set a value in the hidden field, so that the value can be retained on postback and remembered for the next rendering. The control is a collapsible panel extender that does not cause postback, uses jquery, and if postback occurs elsewhere on the page, it remembers if it is expanded or collapsed.

The problem is that the javascript executes, but does not actually change the value in the hidden field. If I use the dom explorer, the hidden fiend is still set to the default, and then when I debug, in the the next postback the hidden field is still set to the default as well.

I have also tried using the tried and true getElementById with no success.

No javascript errors occur.

ASCX code:

<input id="hiddenCurrentState" type="hidden" runat="server" />

Codebehind:

1    using System;
2    using System.Web;
3    using System.Web.UI;
4    using System.Web.UI.WebControls;
5    using System.Text;
6    
7    public partial class Controls_SubControls_CollapsiblePanelExtender : System.Web.UI.UserControl
8    {
9        public string HeaderControlId { get; set; }
10   
11       public string BodyControlId { get; set; }
12   
13       public string CollapseAllControlId { get; set; }
14   
15       public string ShowAllControlId { get; set; }
16   
17       public CollapsedState DefaultState { get; set; }
18   
19       protected void Page_Load(object sender, EventArgs e)
20       {
21           if (!IsPostBack)
22           {
23               hiddenCurrentState.Value = DefaultState.ToString();
24           }
25       }
26   
27       protected override void OnPreRender(EventArgs e)
28       {
29           BuildJQueryScript();
30           base.OnPreRender(e);
31       }
32   
33       private void BuildJQueryScript()
34       {
35           StringBuilder script = new StringBuilder();
36   
37           script.Append("$(document).ready(function(){\n");
38   
39           //toggle based on current state
40           script.Append("if ($(\"#" + hiddenCurrentState.ClientID + "\").attr(\"value\")==\"Expanded\")\n");
41           script.Append("{\n");
42           script.Append("$(\"#" + BodyControlId + "\").show();\n");
43           script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Expanded\");\n");
44           script.Append("}\n");
45           script.Append("else\n");
46           script.Append("{\n");
47           script.Append("$(\"#" + BodyControlId + "\").hide();\n");
48           script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Collapsed\");\n");
49           script.Append("}\n");
50   
51   
52           //toggle on click
53           script.Append("$(\"#" + HeaderControlId + "\").click(function(){\n");
54           script.Append("  $(this).next(\"#" + BodyControlId + "\").slideToggle(500)\n");
55           script.Append("  return false;\n");
56           script.Append("});\n");
57   
58           //collapse all
59           if (!String.IsNullOrEmpty(CollapseAllControlId))
60           {
61               script.Append("$(\"#" + CollapseAllControlId + "\").click(function(){\n");
62               script.Append("  $(\"#" + BodyControlId + "\").slideUp(500)\n");
63               script.Append("  return false;\n");
64               script.Append("});\n");
65           }
66   
67           //show all
68           if (!String.IsNullOrEmpty(ShowAllControlId))
69           {
70               script.Append("$(\"#" + ShowAllControlId + "\").click(function(){\n");
71               script.Append("  $(this).hide()\n");
72               script.Append("  $(\"#" + BodyControlId + "\").slideDown()\n");
73               //script.Append("  $(\".message_list li:gt(4)\").slideDown()\n");
74               script.Append("  return false;\n");
75               script.Append("});\n");
76           }
77   
78           script.Append("});\n");
79   
80           Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CollapsiblePanelScript", script.ToString(), true);
81       }
82   }
83   
84   public enum CollapsedState
85   {
86       Expanded = 0,
87       Collapsed = 1
88   }
+4  A: 

I don't see where you are setting the value of the hidden field on the client side. I would expect to see a line something like the following in your collapse/show functions to actually change the value on the client when the panel is collapsed/expanded.

Collapse:

 script.Append( "   $(\"#" + hiddenCurrentState.ClientID + "\").val(1);\n" );

Show:

 script.Append( "   $(\"#" + hiddenCurrentState.ClientID + "\").val(0);\n" );
tvanfosson
Ah, I see where you are pointing. I found and fixed the error. Logic error. :) Thank you.
@Broken Bokken -- it's customary to upvote helpful answers and select the answer that best answers your question. This is, in fact, how SO operates. Only point this out because you are new to the site.
tvanfosson
A: 

On every post back the entire page is rendered again, any values changed on the client side will not be persisted.

I recommend you store the state in a cookie. As you are using jQuery, the COOKIE library makes this a cinch.

codemonkeh
A: 

Have you tried using <asp:HiddenField> instead of <input>?