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

Question

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>
                        <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

I've edited this question but was struggling to articulate the second paragraph. If it does not still correctly describe your problem please accept my apologies. — andyb, Apr 08 '11 at 13:29
Addparticipant, is a button, which make the panels in default state on its click. — NoviceToDotNet, Apr 08 '11 at 16:47
i just don't understand, how people discover java script coding, because i see intelligence don't work nothing, then people make syntax for java script. As people write down various codes. — NoviceToDotNet, Apr 11 '11 at 04:59

score 6 · Answer 1 · answered Apr 06 '11 at 18:09

6

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.

answered Apr 06 '11 at 18:09

Vinay B R

8,089
2
30
45

1

even better then hidden fields you can use
and after all the values load, display the ones with the visible hide the ones that should be hidden – Sergei Golos Apr 08 '11 at 20:04

score 5 · Answer 2 · answered Apr 06 '11 at 14:10

5

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.

answered Apr 06 '11 at 14:10

Maxx

3,925
8
33
38

i AM NOT GETTING HOW TO USE IT? – NoviceToDotNet Apr 07 '11 at 11:08
i changed my fuynction like this, but it's of no avail. $(document).ready(function() { $(".flip").click(function() { alert('in click '); var toggleStatus = $(".panel").slideToggle("slow"); $.cookie("ToggleStatus", toggleStatus); }); $(".panel").value = $.cookie("ToggleStatus"); }); – NoviceToDotNet Apr 07 '11 at 11:45
1

This will not work without using a jQuery cookie plugin, for example [Cookie](http://plugins.jquery.com/project/Cookie) – andyb Apr 08 '11 at 12:53
1

But some body accessing this code, not installed the plug in then, it will defeat the very purpose. – NoviceToDotNet Apr 08 '11 at 16:56
1

The plugin is just another script like jQuery. Nothing needs to be installed. You can include it the same way as any other JavaScript library. – andyb Apr 08 '11 at 19:41

score 4 · Accepted Answer · answered Apr 07 '11 at 21:56

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();
}

score 3 · Answer 4 · answered Apr 09 '11 at 09:50

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...

score 1 · Answer 5 · answered Apr 25 '12 at 14:39

1

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

answered Apr 25 '12 at 14:39

Nikita Koksharov

10,283
1
62
71

score 1 · Answer 6 · answered Apr 06 '11 at 08:46

1

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

answered Apr 06 '11 at 08:46

airbai

3,906
5
26
30

score 1 · Answer 7 · answered Apr 06 '11 at 15:14

1

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 =)

answered Apr 06 '11 at 15:14

Michel Ayres

5,891
10
63
97

score 1 · Answer 8 · edited May 23 '17 at 12:06

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.

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

8 Answers8