Jump to content

Javascript Toggle Problem


kwilliams

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>

Link to comment
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>

Link to comment
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!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...