Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old October 21st, 2009, 05:16 PM
Banned
 
Join Date: Jul 2005
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Question JavaScript Toggle Problem

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 October 22nd, 2009, 06:32 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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).
 
Old October 23rd, 2009, 10:40 AM
Banned
 
Join Date: Jul 2005
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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?
 
Old October 23rd, 2009, 10:42 AM
Banned
 
Join Date: Jul 2005
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I forgot to note that I've also tried:

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

with the same result.
 
Old October 23rd, 2009, 03:15 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
 
Old October 23rd, 2009, 03:26 PM
Banned
 
Join Date: Jul 2005
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Thumbs up

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>





Similar Threads
Thread Thread Starter Forum Replies Last Post
Toggle/Drilldown help...please!!! s15199d Reporting Services 4 March 24th, 2006 04:11 PM
Toggle CheckBox g_vamsi_krish ASP.NET 1.0 and 1.1 Basics 1 February 13th, 2006 03:00 AM
Toggle Key calvados VB.NET 2002/2003 Basics 2 December 17th, 2004 10:55 AM
Language toggle dsunmedia PHP How-To 2 August 2nd, 2004 11:00 AM
Toggle Button Problem cco2000 Access 0 March 23rd, 2004 09:26 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.