Avatar of lenamtl
lenamtl
Flag for Canada asked on

how to add cookie.js to remember menu state

Hi,

I want to add cookie.js to a menu that will remember the state menu
jQuery cookie https://github.com/carhartl/jquery-cookie
There are some good example on the web but I cannot to adapt it to this menu and I have to use this menu
I cannot change for another one

This is the original menu js code

(function($) {
    "use strict";

    $.fn.tree = function() {

        return this.each(function() {
            var btn = $(this).children("a").first();
            var menu = $(this).children(".treeview-menu").first();
            var isActive = $(this).hasClass('active');

            //initialize already active menus
            if (isActive) {
                menu.show();
                btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
            }
            //Slide open or close the menu on link click
            btn.click(function(e) {
                e.preventDefault();
                if (isActive) {
                    //Slide up to close menu
                    menu.slideUp();
                    isActive = false;
                    btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
                    btn.parent("li").removeClass("active");
                } else {
                    //Slide down to open menu
                    menu.slideDown();
                    isActive = true;
                    btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
                    btn.parent("li").addClass("active");
                }
            });

            /* Add margins to submenu elements to give it a tree look */
            menu.find("li > a").each(function() {
                var pad = parseInt($(this).css("margin-left")) + 10;

                $(this).css({"margin-left": pad + "px"});
            });

        });

    };

Open in new window


This is what have tried  and this is not working
(function($) {
    "use strict";

    $.fn.tree = function() {

     [b]   return this.each(function(e) {
		     var checkCookie = $.cookie("nav-item");
             if (checkCookie != "") {
	         $('.treeview:eq('+checkCookie+')').addClass('active').next().show();
             }[/b]
			 
            var btn = $(this).children("a").first();
            var menu = $(this).children(".treeview-menu").first();
            var isActive = $(this).hasClass('active');

            //initialize already active menus
            if (isActive) {
                menu.show();
                btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
		[b]		$.cookie("nav-item", menu);[/b]
            }
            //Slide open or close the menu on link click
            btn.click(function(e) {
                e.preventDefault();
				
                if (isActive) {
                    //Slide up to close menu
                    menu.slideUp();
                    isActive = false;
                    btn.children(".fa-angle-down").first().removeClass("fa-angle-down").addClass("fa-angle-left");
                    btn.parent("li").removeClass("active");
                } else {
                    //Slide down to open menu
                    menu.slideDown();
                    isActive = true;
                    btn.children(".fa-angle-left").first().removeClass("fa-angle-left").addClass("fa-angle-down");
                    btn.parent("li").addClass("active");
                }
            });

Open in new window


Let me know if you need more code part

Thanks
jQueryJavaScriptHTML

Avatar of undefined
Last Comment
zjm zew

8/22/2022 - Mon
Kyle Hamilton

please provide some sample HTML so we can test your code, or a link to your page.
lenamtl

ASKER
Hi,

You can download the template I'm using
https://github.com/almasaeed2010/AdminLTE

I have used the 'Accepted Solution' from my previous question to embed the menu
https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28420334.html
Michel Plungjan

The idea should be to remove all active, set cookie content active and click the button
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
lenamtl

ASKER
Still need help with this ...
Is there a way without rewriting the entire menu code?
Michel Plungjan

Your cookie is set to a jQuery object. That cannot work well

$.cookie("nav-item", menu);

should likely be

$.cookie("nav-item", menu.attr("id"));

or something
lenamtl

ASKER
I still need help with this
I'm tring to figure out but I have no luck
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Michel Plungjan

That is not very helpful.
Does the cookie get set?
Does it contain the correct information?
Are there any error messages in the console?
Do you have a site where we can see the menu in action?
lenamtl

ASKER
Yes it is set but it is empty
No error message
No live link available

The code I'm using is available from the link I have provided in my first post plus the code I use to modify see the EE link.

I will retry and get back monday
lenamtl

ASKER
I'm wondering is localstorage will be easier to use instead of cookie.js
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER CERTIFIED SOLUTION
lenamtl

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Michel Plungjan

Please share your solution
zjm zew

i have same problem, plz share your solutions. thanks