JavaScript Toggle Problem

kwilliams · October 21st, 2009, 05:16 PM

I have a pretty nifty JavaScript toggle that I found on some site, and customized for use on my ASP.NET (VB.NET) site. It works great, except for one thing: when a user causes a client-side postback because AutoPostBack is set to true on the ASP.NET page's web control, the current toggled state goes away, and that toggle pane is closed (DIPLAY:NONE;).

I need for the toggled window to maintain whatever state it's in when a user causes a client-side postback on the form. Does anyone know how to do this? I'd appreciate any help. Here is my code:

JavaScript Code
//Source: http://blog.movalog.com/a/javascript-toggle-visibility/, scroll down to Neeraj Maurya
function swaptabs (showthis,hidethis) {//begin function
var style2 = document.getElementById(showthis).style;
style2.display = "block";
var style3 = document.getElementById(hidethis).style;
style3.display = "none";
}//end function

ASP.NET Code: (only section referenced)

Code:

<form id="formContactInfo" name="formContactInfo" enctype="multipart/form-data" runat="server">
        <table align="center" id="ContactInfoToggle">
                <tr>
                        <td colspan="2" align="center">Contact Info</td>
                    </tr>
                    <tr>
                                <td colspan="2" align="center">
                            <div id="Section-closed" name="Section-closed" style="DISPLAY: block">
                                <a href="javascript:swaptabs('Section-open','Section-closed');">
                                    [+]<strong> Add Section</strong>
                                </a>
                            </div>
                        </td>
                    </tr>
                </table>

                <div id="Section-open" name="Section-open" style="DISPLAY: none">
                <table align="center" id="ContactInfo">
                        <tr>
                            <td colspan="2" align="center">
                                <a href="javascript:swaptabs('Section-closed','Section-open');">
                                    [-] Collapse Section
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" width="20%">
                                Full Name
                            </td>
                            <td width="80%">
                                <asp:Textbox ID="txtFullName" columns="20" MaxLength="50" runat="server" />
                        </td>
                        </tr>
                </table>
                </div>
</form>

Old Pedant · October 22nd, 2009, 06:32 PM

A couple of ways you could do it:
-- Cookies (can be all in JS then)
-- Let ASP.NET help you.

If you let ASP.NET help, then just add a hidden form field to your <form>. (An ASP.NET field, that is.) You can give it a default value or just leave it blank.

When you change state in your JS code, also store a flag to yourself in the hidden form field.

When the page loads next time, go look at the hidden form field and set the display accordingly.

I would say that you treat *any* value in the hidden field that isn't exactly what you put there as meaning "initial state" (whatever your definition of initial state is).

kwilliams · October 23rd, 2009, 10:40 AM

Thanks for the quick reply and detailed instructions OldPendant!

I'm getting stuck on something that should be simple, and that's how to assign a value to a form field. For testing purposes, I've tried using an ASP.NET form field, like this:
<asp:TextBox ID="hfContactToggleState" runat="server" />

...and a HTML form field like this:
<input id="hfContactToggleState" type="text" />

...while trying to pull the form field like this:
document.getElementById('ctl00$ContentPlaceHolder1 $hfContactToggleState') = "DISPLAY:block;"

...and this:
document.forms["formContactInfo"].elements["hfContactToggleState"].value = "DISPLAY:block;"

...without success. the form field remains empty no matter what I've tried. That JavaScript code is placed in the ContentPlaceHolder for the head of the document, since I'm using a MasterPage. It's showing up in the source of the page when I go to "view Source", so it is loading with the page.

What am I missing?

kwilliams · October 23rd, 2009, 10:42 AM

I forgot to note that I've also tried:

document.getElementById('hfContactToggleState') = "DISPLAY:block;"

with the same result.

Old Pedant · October 23rd, 2009, 03:15 PM

Do a VIEW==>>SOURCE of the HTML that your ASP.NET code is generating and show me the form field in question, as it appears in the HTML. *NOT* as it appears in the ASP.NET page.

kwilliams · October 23rd, 2009, 03:26 PM

Ok, I solved it using a different method. That's because when I added a runat="server" attribute to the div tag so that I could work with ASP.NET controls, the JavaScript wouldn't run. So there really wasn't a way for me to work with client-side and server-side tags together.

So I put the entire div section into an ASP.NET UpdatePanel, and then added more script to add "DISPLAY:none" to the style attribute onLoad of the body tag. Doing this means that the div section stays open when AutoPostBack's occur, but also toggles as I wanted it to.

Here's my code:

Additional JavaScript Code:

Code:

function resetToggle() {
    var strContactInfoToggleDiv = document.getElementById('Section-open');
    strContactInfoToggleDiv.style.display = 'none';
}

MasterPage.master's body tag:
<body onload="resetToggle()">

ASP.NET Code:

Code:

<asp:UpdatePanel ID="ContactUpdatePanel" UpdateMode="Always" ChildrenAsTriggers="true" runat="server">
                    <ContentTemplate>
                        <asp:Panel ID="ContactPanel" runat="server">
<div id="Section-open" name="Section-open">
                <table align="center" id="ContactInfo">
                        <tr>
                            <td colspan="2" align="center">
                                <a href="javascript:swaptabs('Section-closed','Section-open');">
                                    [-] Collapse Section
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" width="20%">
                                Full Name
                            </td>
                            <td width="80%">
                                <asp:Textbox ID="txtFullName" columns="20" MaxLength="50" runat="server" />
                        </td>
                        </tr>
                </table>
                </div>
                        </asp:Panel>
                    </ContentTemplate>
                </asp:UpdatePanel>