How do I use cookies with content displayed by on click events? (HTML/CSS/jQuery)

Question

I am having trouble finding a solution to a problem that involves the use of cookies. The basic idea is that when a user clicks a tab a jQuery on click event is triggered and the content displayed below changes. Is it possible to store the latest state of the page once the page is refreshed?

The HTML code is displayed below

<ul>
   <li id='column1'><a href='#' class='current'>column1</a></li>
   <li id='column2'><a href='#'>column2</a></li>
   <li id='column3'><a href='#'>column3</a></li>
</ul>

<div id='displayContent'>
*Content displayed here*
</div>

The jQuery Code is displayed below

$("#column1").click(function(){
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");
});

So basically how it works is that when you click a column the content for the desired selection is displayed and the 'current' class is added to the selection. I need to find a solution to how I can get the browser to remember which column was clicked last so that when the page is refreshed it remembers the last column.

Thanks!

UPDATES - JQUERY CODE

Ok, so downloaded and added the cookie plugin to my folders and have it setup. I have now changed my jQuery code to the following code

$("#column1").click(function(){
    $("#column3Content").hide();
    $("#column2Content").hide();
    $("#column1Content").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");

    $.cookie("column1", 1);
    $.removeCookie("column2");
    $.removeCookie("column3");
});

var cookieVal = $.cookie("column1");
if ( cookieVal == 1) 
{
  $("#column3Content").hide();
  $("#column2Content").hide();
  $("#column1Content").css("display", 'block');
  $("#column3 a").removeClass();
  $("#column2 a").removeClass();
  $("#column1 a").addClass("current");
}

It now remembers which column was last clicked, yay! Unfortunately when it checks which cookie is present it doesn't seem to add the 'current' class back in, which is used to change colour of selected column, any ideas?

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

How do I set/unset cookie with jQuery?

To get started just see the link above. Simply create a cookie and read the value.

$.cookie("jar", 1);
var cookieVal = $.cookie("jar");
$.removeCookie("jar");

UPDATE

$("#column1").click(function(){
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");

    $.cookie("column1", 1);

});

var cookieVal = $.cookie("column1");
if ( cookieVal == 1 ) 
{
    $("#column3").hide();
    $("#column2").hide();
    $("#column1").css("display", 'block');
    $("#column3 a").removeClass();
    $("#column2 a").removeClass();
    $("#column1 a").addClass("current");
}

edited May 23 '17 at 11:44

Community

1
1

answered Jan 23 '16 at 14:07

Philipp Braun

1,563
2
23
39

Ok, i'll give that a go and get back to you. Thanks for the quick reply – Matthew_M123 Jan 23 '16 at 14:23
Am I correct in thinking the code you supplied would go within the jQuery click event. I would set the cookie there and then remove the cookies from the other columns? – Matthew_M123 Jan 23 '16 at 14:28
Yes, correct. The cookie can be accessed after you reenter the page. – Philipp Braun Jan 23 '16 at 14:33
And will this be session based as well? I will have multiple users using the system and will obviously want the cookies to only be applied to the current session user – Matthew_M123 Jan 23 '16 at 14:36
http://php.about.com/od/learnphp/qt/session_cookie.htm Here is a nice article stating the difference between a cookie and a session. Cookies generally remain in the users browser even after it is closed. Session do not. – Philipp Braun Jan 23 '16 at 14:38
In order for me to show you my new code do I create a new answer for this question or do I edit the existing post? Sorry i'm new to posting on stack overflow – Matthew_M123 Jan 23 '16 at 14:43
Would be nice if you could create a new one. Otherwise this post will get a bit overfilled. – Philipp Braun Jan 23 '16 at 14:45
Ok, I have created a new answer – Matthew_M123 Jan 23 '16 at 14:49
Please mark this post as closed (Answer as correct). Otherwise Question remains open. – Philipp Braun Jan 23 '16 at 14:52
I have not yet got to the answer. Maybe I was unclear, I just wanted to post the code that I have now as I am unsure what the next step is – Matthew_M123 Jan 23 '16 at 14:53
You need to check what the cookie value is and depending on the value you need change your column. So simply if ( cookieVal == 1) etc. – Philipp Braun Jan 23 '16 at 14:56
I updated the code within the original post and removed the 'answer post'. You said you are not sure what the code is supposed to do - the basic premise for the code is that the column will be remembered if the page is refreshed, thats all. I now have an if statement which checks if cookieVal is equal to 1, and if it will remove the cookies from column2,3. Sorry I'm unsure if this is correct – Matthew_M123 Jan 23 '16 at 15:01
When I refresh, it just goes back to the original selection – Matthew_M123 Jan 23 '16 at 15:05
I have now provided a quick fix. I hope it helps. – Philipp Braun Jan 23 '16 at 15:16
It doesn't seem to work, should I set the other columns to - $.cookie("column1", 1); $.cookie("column2", 2); $.cookie("column3", 3);? – Matthew_M123 Jan 23 '16 at 15:22
It kind of works! Let me change a few things and see if i can get it to work fully! – Matthew_M123 Jan 23 '16 at 15:26
The only thing that doesn't work is the add class current. It just removes the current class from everything. The current class is intended to change the selected column colour – Matthew_M123 Jan 23 '16 at 15:32
could you open another question. this seems to be a bit unrelated to using cookies with jQuery. – Philipp Braun Jan 23 '16 at 15:36
It works normally, it just doesn't work with cookies, so it is still related to cookies – Matthew_M123 Jan 23 '16 at 15:39
Fixed! Thanks for all your help! – Matthew_M123 Jan 23 '16 at 15:45

How do I use cookies with content displayed by on click events? (HTML/CSS/jQuery)

1 Answers1