kwilliams Posted October 21, 2009 Share Posted October 21, 2009 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 More sharing options...
dsonesuk Posted October 22, 2009 Share Posted October 22, 2009 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. Link to comment Share on other sites More sharing options...
kwilliams Posted October 22, 2009 Author Share Posted October 22, 2009 That's something that I've been looking into, but I'm lost on how to do it. Do you have an example? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 22, 2009 Share Posted October 22, 2009 <!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 More sharing options...
kwilliams Posted October 23, 2009 Author Share Posted October 23, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.