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:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class Controls_SubControls_CollapsiblePanelExtender : System.Web.UI.UserControl
{
    public string HeaderControlId { get; set; }

    public string BodyControlId { get; set; }

    public string CollapseAllControlId { get; set; }

    public string ShowAllControlId { get; set; }

    public CollapsedState DefaultState { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            hiddenCurrentState.Value = DefaultState.ToString();
        }
    }

    protected override void OnPreRender(EventArgs e)
    {
        BuildJQueryScript();
        base.OnPreRender(e);
    }

    private void BuildJQueryScript()
    {
        StringBuilder script = new StringBuilder();

        script.Append("$(document).ready(function(){\n");

        //toggle based on current state
        script.Append("if ($(\"#" + hiddenCurrentState.ClientID + "\").attr(\"value\")==\"Expanded\")\n");
        script.Append("{\n");
        script.Append("$(\"#" + BodyControlId + "\").show();\n");
        script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Expanded\");\n");
        script.Append("}\n");
        script.Append("else\n");
        script.Append("{\n");
        script.Append("$(\"#" + BodyControlId + "\").hide();\n");
        script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Collapsed\");\n");
        script.Append("}\n");


        //toggle on click
        script.Append("$(\"#" + HeaderControlId + "\").click(function(){\n");
        script.Append("  $(this).next(\"#" + BodyControlId + "\").slideToggle(500)\n");
        script.Append("  return false;\n");
        script.Append("});\n");

        //collapse all
        if (!String.IsNullOrEmpty(CollapseAllControlId))
        {
            script.Append("$(\"#" + CollapseAllControlId + "\").click(function(){\n");
            script.Append("  $(\"#" + BodyControlId + "\").slideUp(500)\n");
            script.Append("  return false;\n");
            script.Append("});\n");
        }

        //show all
        if (!String.IsNullOrEmpty(ShowAllControlId))
        {
            script.Append("$(\"#" + ShowAllControlId + "\").click(function(){\n");
            script.Append("  $(this).hide()\n");
            script.Append("  $(\"#" + BodyControlId + "\").slideDown()\n");
            //script.Append("  $(\".message_list li:gt(4)\").slideDown()\n");
            script.Append("  return false;\n");
            script.Append("});\n");
        }

        script.Append("});\n");

        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CollapsiblePanelScript", script.ToString(), true);
    }
}

public enum CollapsedState
{
    Expanded = 0,
    Collapsed = 1
}

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:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class Controls_SubControls_CollapsiblePanelExtender : System.Web.UI.UserControl
{
    public string HeaderControlId { get; set; }

    public string BodyControlId { get; set; }

    public string CollapseAllControlId { get; set; }

    public string ShowAllControlId { get; set; }

    public CollapsedState DefaultState { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            hiddenCurrentState.Value = DefaultState.ToString();
        }
    }

    protected override void OnPreRender(EventArgs e)
    {
        BuildJQueryScript();
        base.OnPreRender(e);
    }

    private void BuildJQueryScript()
    {
        StringBuilder script = new StringBuilder();

        script.Append("$(document).ready(function(){\n");

        //toggle based on current state
        script.Append("if ($(\"#" + hiddenCurrentState.ClientID + "\").attr(\"value\")==\"Expanded\")\n");
        script.Append("{\n");
        script.Append("$(\"#" + BodyControlId + "\").show();\n");
        script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Expanded\");\n");
        script.Append("}\n");
        script.Append("else\n");
        script.Append("{\n");
        script.Append("$(\"#" + BodyControlId + "\").hide();\n");
        script.Append("$(\"#" + hiddenCurrentState.ClientID + "\").val(\"Collapsed\");\n");
        script.Append("}\n");


        //toggle on click
        script.Append("$(\"#" + HeaderControlId + "\").click(function(){\n");
        script.Append("  $(this).next(\"#" + BodyControlId + "\").slideToggle(500)\n");
        script.Append("  return false;\n");
        script.Append("});\n");

        //collapse all
        if (!String.IsNullOrEmpty(CollapseAllControlId))
        {
            script.Append("$(\"#" + CollapseAllControlId + "\").click(function(){\n");
            script.Append("  $(\"#" + BodyControlId + "\").slideUp(500)\n");
            script.Append("  return false;\n");
            script.Append("});\n");
        }

        //show all
        if (!String.IsNullOrEmpty(ShowAllControlId))
        {
            script.Append("$(\"#" + ShowAllControlId + "\").click(function(){\n");
            script.Append("  $(this).hide()\n");
            script.Append("  $(\"#" + BodyControlId + "\").slideDown()\n");
            //script.Append("  $(\".message_list li:gt(4)\").slideDown()\n");
            script.Append("  return false;\n");
            script.Append("});\n");
        }

        script.Append("});\n");

        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CollapsiblePanelScript", script.ToString(), true);
    }
}

public enum CollapsedState
{
    Expanded = 0,
    Collapsed = 1
}

• asp
• javascript
• jquery
• postback

• 1 +1 for the Freudian "hidden fiend" :) – demoncodemonkey Commented Jun 30, 2011 at 11:36

3 Answers 3

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" );

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

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

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