2

I am new to JavaScript and jQuery so let me know if I'm way off base. I am using the cookie plugin from here: https://github.com/carhartl/jquery-cookie.

I have a page with dynamic links. They send the user to the same page they are already on with some GET information in the URL. I want to be able to highlight the previous link clicked.

My idea was to store the element that is clicked in a cookie and then add a class to that element.

Setting the cookie

$("td.column1").on({
    click: function () {
      $.cookie('productCookie', this); //How do I store 'this' into the cookie?
    }
});

Getting the cookie

var productValue = $.cookie('productCookie');
$(productValue).addClass("select singleselected");

Code without cookies

I know from experience that this line of code worked before I added the links, which is also before the page was being redrawn.

$(this).addClass("select singleselected");

I've tried looking into how the this keyword works but I'm afraid I'm not sure what selector the addClass method is getting or how to get the current element.

Solution Used

function getParameters(geturl, columnNumber) {
    var url = geturl,
        urlRegExp = new RegExp(url.replace(/\/$/, ''));

    $(columnNumber).each(function () {
        if (urlRegExp.test(this.href)) {
            $(this).addClass("singleselected select");
        }
    });
}
MiniRagnarok
  • 959
  • 11
  • 23
  • Cookies can only store strings or numbers, not DOM elements. You need to store some unique property of the clicked link -- an HREF or ID or index number -- instead of `this`. Without seeing your HTML I can't provide more details. – Blazemonger Sep 14 '12 at 21:00
  • I generally find it easier to add the class server-side by looking at the current url. You can still look at the current url in javascript and do the same. – bygrace Sep 14 '12 at 21:00
  • What serverside language are you using? – bygrace Sep 14 '12 at 21:04
  • Fyi, I would advise not using cookies. Some people disable them. And what if someone gets to a link from google? Then you wont have something stored in a cookie to highlight the selected page. – bygrace Sep 14 '12 at 21:27
  • I'm using MVC3. I am aware that some people don't use cookies. These people already do. Furthermore, I am already making a host of decisions in the JavaScript code, the same decisions that this code relies on. Keeping this client side keeps it DRY. – MiniRagnarok Sep 14 '12 at 22:18
  • I'll try implementing these ideas at work on Tuesday. Thanks for all of the suggestions everybody. – MiniRagnarok Sep 14 '12 at 22:19

3 Answers3

1

If your elements have IDs, you can save the element's ID in a cookie and highlight it on the next pageload. Cookie (and localStorage, for that matter) can only store strings, or things that can be serialized to a string. HTML elements are not serializable.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
1

Check this thread out: jQuery add class .active on menu

The basic idea is that you parse the current url and find the anchor tag that is active based on the url.

Community
  • 1
  • 1
bygrace
  • 5,868
  • 1
  • 31
  • 58
0

Cookies hold strings. You will need to store some string-based indicator for which link was clicked.

It could be an id or a row number in your table or something like that. Then, when you read the cookie upon page load, you can find the DOM element that matches that indicator and change it accordingly.

You cannot store a DOM element reference in a cookie as DOM element references are not strings and they are not persistent from one page load to the next. A specific DOM element reference only exists during a given page.

If you show the actual HTML that covers what you want to save, we could make a more specific reference about what would make sense to save in the cookie. If it's a table, perhaps a row/column count (converted to string form). If every link has a unique id, then the easiest is to just store the id.

jfriend00
  • 683,504
  • 96
  • 985
  • 979