Question

Based on my previous question here and here, I found that I can set a cookie with javascript. I want to combine it with jquery to have a cookie state set for toggled table rows. I want to keep the hidden rows hidden upon reload.

Here is what I have achieved so far:

// Load cookies if any   
if(readCookie('togState')) {
       $('table#toggle tr.' + readCookie('togState')).hide();
    }

    $(function() {
        $('table#toggle tr.container').click(function() {
          var idTog = $(this).attr('id');
            $(this).toggleClass('off').nextAll('.' + idTog).toggle();
            setCookie('togState', idTog, 30);
            alert('Cookies: ' + readCookie('togState'));
        });

});

The parent: <tr id="parent-1" class="container">

The following children: <tr class="contained parent-1"> , etc

As you can see the cookie is read, but is not set upon browser refresh. What am I doing wrong?

What I want is hide any toggled rows (having their classes equal to their parent’s container ID), if the parent container is clicked, and so the cookie is set.

Any help would be very much appreciated. Thanks.

The source cookie I used for quick check:

function setCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    setCookie(name,"",-1);
}

UPDATE:

I have also tried each function to no luck:

$('table#toggle tr.' + readCookie('togState')).each(function() {
     $(this).hide();
   });

UPDATE 2:

If I place the check inside jquery (I used hide()), it works, but only for a single cookie. So the actual problem now is how to keep more cookies for more parent rows?

Answer 1

If you’re using the setCookie() function from this answer, you’re setting your cookie to have a lifetime of 30 seconds. That’s probably not long enough for your requirements, and you should probably look at increasing it ever so slightly. 🙂

EDIT Re: your question edit – If you’re trying to set multiple cookies, you’ll have a problem with the following line:

document.cookie = name+"="+value+expires+"; path=/";

Here, you’re overwriting the cookie property every time you call setCookie(). If you want to set multiple cookies, you need to prepend/append a new name/value pair to the string with each call to setCookie()