How to set the id of a div as cookie?

Question

I have got a task to highlight the selected menu while refreshing the page. For that I want to use cookie. Html code is

<div class="menuBar">
            <div class="menuHeader ui-corner-top">
             <span><a href="#" onclick="Home()" id="home">Home</a></span>
            </div>
            <div class="menuHeader ui-corner-top">
             <span><a href="#" onclick="NewTransaction()" id="newtransaction">New Transaction</a></span>
            </div>
</div>

Javascript file is

function Home() {
            window.location.href = "../../home/welcome";
        }
        function NewTransaction() {
            window.location.href = "../../EnergyCatagory/index";
        }

But I have a code to set the menu as selected.But its not a good way.How can I pass the value of the selected menu to the page while refreshing? this is the code for highlighting the menu

 $(document).ready(function () {
                var currentUrl = window.location.href;
                if (currentUrl.indexOf("home/welcome") !== -1) {
                    $("#home").parent().parent().addClass('menuHeaderActive');
                }
                else if (currentUrl.indexOf("EnergyCatagory/index") !== -1) {
                    $("#newtransaction").parent().parent().addClass('menuHeaderActive');
                }
                else if (currentUrl.indexOf("portfolio/Index") !== -1) {
                    $("#portfolio").parent().parent().addClass('menuHeaderActive');
                }
            });

@MatthewAgustin, can any code be "non semantic"? For me the answer is no. A mountain is non semantic, as is a laundry basket. — Beetroot-Beetroot, Apr 03 '13 at 08:40

score 4 · Answer 1 · answered Apr 03 '13 at 09:03

4

Give id for every menu item.

Then in the onclick() function of menu item set that id as cookie.

Set cookie

$.cookie("selectedId", $(this).attr('id'));

In document.ready function add selected class to the element with id obtained from cookie

answered Apr 03 '13 at 09:03

Okky

10,338
15
75
122

Victor · Accepted Answer · 2013-04-04T11:33:22.530

2

You can implement it like this:

function goToLocation(sLocation, id) {
   $.cookie("activediv", id);
   window.location.href = sLocation;
}

in html:

<a href="#" onclick="goToLocation('../../home/welcome', 'home')" id="home">Home</a>

in jQuery ready:

$('#' + $.cookie("activediv")).parent().parent().addClass('menuHeaderActive');

edited Apr 04 '13 at 11:33

answered Apr 03 '13 at 08:16

Victor

1,449
10
8

@ChrisMoutray- Here I got an error like this TypeError: $.cookie is not a function [Break On This Error] var a=($.cookie("activediv")); But I have the cookie plugin – Nithin Viswanathan Apr 03 '13 at 09:23
@victor-Here I got an error like this TypeError: $.cookie is not a function [Break On This Error] var a=($.cookie("activediv")); But I have the cookie plugin – Nithin Viswanathan Apr 03 '13 at 09:34
Link about cookie with jQuery is on comment below. I am only use your information and information about cookie to compile some result. – Victor Apr 04 '13 at 11:30
@Chris Moutray thank you to correct my answer - order in function is very important. – Victor Apr 04 '13 at 11:32

score 1 · Answer 3 · edited May 23 '17 at 12:31

1

Try to set cookises using jQuery as:

$.cookie("name", "value");

More you can read here:How do I set/unset cookie with jQuery?

edited May 23 '17 at 12:31

Community

1
1

answered Apr 03 '13 at 08:05

Gurmeet

3,094
4
19
43

I know this.But how to implement this on my proect – Nithin Viswanathan Apr 03 '13 at 08:08

How to set the id of a div as cookie?

3 Answers3