Jump to content
kwilliams

Javascript Toggle Problem

Recommended Posts

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 Mauryafunction swaptabs (showthis,hidethis) {//begin function var style2 = document.getElementById(showthis).style; style2.display = "block"; var style3 = document.getElementById(hidethis).style; style3.display = "none";}//end functionASP.NET Code: (only section referenced)

<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="java script: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="java script: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>

Share this post


Link to post
Share on other sites

could try a javascript cookie, which will hold the current state of 'block' or 'none', then all is required is to read this cookie, and assign this value to the element.

Share this post


Link to post
Share on other sites

<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function set_cookie( name, value, days) { var cookie_string = name + "=" + escape ( value ); if (days){var expires = new Date ();expires.setTime(expires.getTime()+(days*24*60*60*1000));cookie_string += "; expires=" + expires.toGMTString();} document.cookie = cookie_string; }function get_cookie(cookie_name){ var results = document.cookie.match( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) return ( unescape ( results[2] ) ); else return null;} function swaptabs() { var sec1 = document.getElementById("Section_1"); var sec2 = document.getElementById("Section_2"); if (sec1.style.display == "block") { sec1.style.display = 'none'; cookievalue = 'none'; sec2.style.display = 'block'; } else { sec1.style.display = 'block'; cookievalue = 'block'; sec2.style.display = 'none'; } set_cookie("displayvalue", cookievalue, 7); //value stores for 7 days } function getcurrentdisplay() //get cookie display value { var sec1 = document.getElementById("Section_1"); var sec2 = document.getElementById("Section_2"); var displaycookie = get_cookie("displayvalue"); if(displaycookie){ if(displaycookie=="none") {sec1.style.display = 'none';sec2.style.display = 'block'; } else {sec1.style.display = 'block';sec2.style.display = 'none'; }} } window.onload=getcurrentdisplay;/*--*//*]]>*/</script> <style type="text/css"></style></head><body> <table align="center" id="ContactInfoToggle"> <tr> <td colspan="2" align="center">Contact Info</td> </tr> <tr> <td colspan="2" align="center"> <div id="Section_1" style="display: block"> <a href="java script:swaptabs()"> [+]<strong> Add Section</strong> </a> </div> </td> </tr></table> <div id="Section_2" style="display: none"> <table align="center" id="ContactInfo"> <tr> <td colspan="2" align="center"> <a href="java script:swaptabs();"> [-] 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></body></html>

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Ok, I solved it using a different method, and I thought I'd post it in-case it would help anyone else. I changed my approach 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:

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

MasterPage.master's body tag:<body onload="resetToggle()">ASP.NET 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="java script: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>

NOTE: I replaced the dashes with underscores (Section-open = Section_open) in order to be valid.Thanks for your included code; I didn't see it until after I was done with my solution. I'll add it to my library if I ever need it. I appreciate your help!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...