How can I persist the state of slideToggle at post back?

I want jQuery slideToggle() to persist it's state. By default when the page loads it is collapsed. For the <div> that has the slideToggle() applied there is an asp: button, and when clicked some operation is performed, but probably a page post back occurs.

If the page is refreshed the initial state of the <div> should be visible if the user had previously clicked the slideToggle(). Similarly if the user collapses the <div> again, when the page is refreshed (either F5 or a post back) then the <div> should once again be initially collapsed.

So basically I want to know how to persist the state of slideToggle() at post back? Here is the code:

<script type="text/javascript">
    $(document).ready(function() {
        $(".flip").click(function() {
            $(".panel").slideToggle("slow");
        });
    });
</script>

<div>
    <div class="panel">
        <table>
            <tr>
                <td>First Name:</td>
                <td><asp:TextBox runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Last Name:</td>
                <td><asp:TextBox ID="LastName" runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><asp:TextBox ID="Email" runat="server" Text=""></asp:TextBox></td>
            </tr>
            <tr>
                <td>Role Name:</td>
                <td>
                    <asp:DropDownList ID="RoleName" runat="server">
                        <asp:ListItem Text="Select a role" Enabled="true" Value=""> </asp:ListItem>
                        <asp:ListItem Text="DC" Value="DC"> </asp:ListItem>
                        <asp:ListItem Text="ST" Value="ST"> </asp:ListItem>
                        <asp:ListItem Text="AD" Value="AD"> </asp:ListItem>
                        <asp:ListItem Text="CA" Value="CA"> </asp:ListItem>
                        <asp:ListItem Text="GSP" Value="GSP"> </asp:ListItem>
                        <asp:ListItem Text="GDC" Value="GDC"> </asp:ListItem>
                        <asp:ListItem Text="GST" Value="GST"> </asp:ListItem>
                        <asp:ListItem Text="GAD" Value="GAD"> </asp:ListItem>
     开发者_如何学Python                   <asp:ListItem Text="GCA" Value="GCA"> </asp:ListItem>
                        <asp:ListItem Text="GSP" Value="GSP"> </asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td><asp:Button ID="Addparticipant" runat="server" Text="Add Participant" /></td>
            </tr>
        </table>
    </div>
    <p class="flip">Show/Hide Panel</p>
</div>

The ASP code:

Protected Sub Addparticipant_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Addparticipant.Click
    Response.Write("Hi it work yaar")
End Sub

---

as an alternative to cookies you could look at asp.net hidden fields. You can write values to it and read them back using javascript.

Here is a sample on how u can read\write values to hidden fields using JS. The cookie option might not work if user has it disabled in which case you can use hidden fields as a fall back option.

---

You can do so with cookies, like airbai pointed out. If you're using jquery it's as simple as setting

$.cookie("ToggleStatus", toggleStatus);

toggleStatus being whether or not your toggled element is currently visible or not. You would retrieve it with:

var toggleStatus = $.cookie("ToggleStatus");

Alternatively, you can create a form field control and save the value in there.

---

I have created an example for you in jsfiddle on how to use cookie to save and retrive the state of your toggle http://jsfiddle.net/6KkCE/

Javascript code:

var panel = $(".panel"), flip = $(".flip"),
    state = $.cookie("ToggleStatus");

flip.click(function() {
    panel.slideToggle("slow", function() {
        $.cookie("ToggleStatus", (state == 1? "0" : "1"));
    });
});

if ((state == 0 && panel.is(':visible'))) {
    panel.slideUp();
}

---

There are different ways to persist the state of a javascript manipulated object. The first is to store it in a cookie. Very simple an supported by the most browsers:

$(function() {

    var cookie = document.cookie,
        state  = cookie.substr(cookie.search('buttonCollapsed=')+16,1),
        elem   = $('div.collapsable');

    if (state == 1) {
        elem.hide();
    }

    elem.slideToogle(function() {

        if ( elem.is(':visible') ) {
            document.cookie = "buttonCollapsed=0";
        } else {
            document.cookie = "buttonCollapsed=1";
        }

    });

});

Here is a good Documentation for Cookies in Javascipt.

In modern browsers you can use the local storage. This is part of Javascripts Webstorage Specification and should be already implemented in the latest browser versions. Firefox supports it since version 3.5, for example. In this storage you can place complex objects with all settings you need. You only have to serialize them to a JSON string. Its really easy:

var settings = {
    buttonCollapsed: true,
    lastPage: 5,

    // ...

    someNumbers: [1,4,6,9]
};

// Write object into storage
window.localStorage['mySettings'] = JSON.stringify(settings);

// Read object fron storage
settings = JSON.parse(window.localStorage['mySettings']);

if(settings.buttonCollapsed) {
    $('div').hide();
}

If you don't need to support old browser with the full functionality, I would use the local storage. If you later want to store more complex data you are able to reuse it. It may be more comfortable, if you build some accessor functions like save($key, $value) and load($key). I have begun a jQuery plugin which uses the local storage, but its currently not ready to use. Maybe you get some inspiration.

If you want to support storing the state for new browsers an f*** o** the old ones you should check if the local storage is available:

if (typeof window.localStorage !== 'undefined') {
    // ... 
}

Hope this helps...

---

You can save the state in cookie and retrieve it in window.onload.

---

I believe that Maxx and Airbai are right about cookies.

Here some links:

COOQUERY Plugin

W3Schools explanation about js cookie

Maybe this is going to help you out =)

---

In my experience going down the cookie path can lead to bloat in that every user interaction someone wants to persist becomes another cookie. Cookies slow down the responsiveness of websites. Don't forget, cookies are sent by the browser each time it accesses that server.

I think what you should really ask yourself is what is the benefit of persisting this have on your site? It is purely cosmetic; a nice to have feature if the user has JavaScript enabled? What is the impact if JavaScript is disabled?

That said, if you want to use jQuery to read/write your cookies you will need one of the (many) jQuery cookie plugins. I think the most well known is this one. Or have a look at Can jQuery read/write cookies to a browser? which has some good answers.

Personally, I think progressive enhancement is the way to go. Support the automatic display of the slideToggle() <div>s by using local storage to persist/read the data to/from. No cookies to worry about as you have simple client-side persistence. The major drawback of course is that this is relatively new and not all browsers support it. If progressive enhancement (which amongst other things means offering users with modern browsers an enhanced version of the page) does not fit in with your requirements and you have to implement this feature for older browsers as well, you may want to look at store.js and a nice article on why it is good.

---

Try to use localStorage browser object. Here is crossbrower libs jStorage and WEBSHIMS json-storage