Using Jquery to set and check cookies

[RichardKYA]

In XF default set up (with no other jquery plugins), is it possible to use jQuery to set/get/check/delete cookies?

Thank you

 

[RichardKYA]

OK, trying this...

$.setCookie(div.attr('id'), 'show', 86400 * 365);
alert("Cookie Created!");

...gives me this in the console log...

Set cookie myDivId2 = show
TypeError: c.toUTCString is not a function

...and the alert doesn't even trigger, what am I getting wrong?

Thank you

 

[Chris D]

The third argument needs to be a JavaScript Date object (rather than the number of seconds).

var expires = new Date(new Date().getTime() + 365 * 86400000); // 365 days
$.setCookie(div.attr('id'), 'show', expires);
alert("Cookie Created!");

 

[RichardKYA]

Ah, I see!

Thank you Chris

 

[RichardKYA]

I have another question regarding JS scope if someone doesn't mind taking a quick look?

I'll start by saying, I pretty much know nothing about JS (not for the lack of trying lol) and only I started learning jQuery 2 days ago, which seems to be so much easier, but I am having trouble with the scope side of things, after reading and watching many tutorials, I think I understand it correctly, but it doesn't seem to be working for me, so I keep reading and watching more tutorials to figure out what I am getting wrong, but I'm left scratching my head and I know the answer is probably something obvious.

Anyway, my understanding is, if a var is declared in a parent function, it will be available to it's child functions, but by default, child function variables are not available to it's parents. Kinda like, when my parents earn money, it's available to them AND me, but when I earn money, they don't see a penny

My variables only seem to be available if I declare them inside the actual child function that needs them and they seem to work fine, so I assume the variables themselves are not the problem and it must be something else that I am doing/not doing.

My editor (Dreamweaver) doesn't show any errors whether I declare them locally or globally, it's only if I remove them completely it will display "undefined" errors, so again, I assume I'm getting things right scope-wise, it just doesn't work properly in any browser that I've tried unless they are in the actual child function that uses them.

This is what I have...

Spoiler: This works - Declared in function that uses them

$(document).ready(function() {
   
    // If category has cookie, stay open on page reload
    $("ol").each(function() {
       
        if($.getCookie($(this).attr('id'))) {
            $(this).show();
        }else{
            $(this).hide();
        }
    });
       
    // Sets category link text to match relevant state on page reload
    $("a.ToggleCategory").each(function() {
       
        var olCategory = $(this).parent("span").parent("h3").next("ol");
       
        if($.getCookie(olCategory.attr('id'))) {
            $(this).text("Hide ");
        }else{
            $(this).text("Show");
        }
    });
   
    // Toggles individual Smilie Category display and Toggles link text (Show/Hide)
    $("a.ToggleCategory").click(function(e){
        e.preventDefault();
       
        var olCategory = $(this).parent("span").parent("h3").next("ol");
        var expires = new Date(new Date().getTime() + 365 * 86400000); // 365 days
       
        if(!$.getCookie(olCategory.attr('id'))) {
            $.setCookie(olCategory.attr('id'), 'show', expires);
        }else{
            $.deleteCookie(olCategory.attr('id'));
        }
       
           olCategory.slideToggle(1000);
           $(this).html($(this).text() === 'Hide ' ? 'Show' : 'Hide ');
    });
   
    // Shows ALL Categories
    $("a.ShowAllCats").click(function(e){
        e.preventDefault();
           
        $("ol").each(function() {                // Check all Categories
           
            var expires = new Date(new Date().getTime() + 365 * 86400000); // 365 days
               
            if(!$.getCookie($(this).attr('id'))) {                 // If they DON'T have a cookie already
                $(this).slideToggle(1000);                        // Slide Open
                $("a.ToggleCategory").text("Hide ");                // Change text to "Hide"
                $.setCookie($(this).attr('id'), 'show', expires);    // And set a cookie for the category
            }
        });
    });
       
    // Hides ALL Categories
    $("a.HideAllCats").click(function(e){
        e.preventDefault();
           
        $("ol").each(function() {            // Check all Categories
           
            if($.getCookie($(this).attr('id'))) {                // If they DO have a cookie already
                $(this).slideToggle(1000);                    // Slide Closed
                $("a.ToggleCategory").text("Show");            // Change text to "Show"
                $.deleteCookie($(this).attr('id'));            // And delete cookie for category
            }
        });
    });
});

Spoiler: This Doesn't work - In parent function

$(document).ready(function() {
       
    var olCategory = $(this).parent("span").parent("h3").next("ol");
    var expires = new Date(new Date().getTime() + 365 * 86400000); // 365 days
   
    // If category has cookie, stay open on page reload
    $("ol").each(function() {
       
        if($.getCookie($(this).attr('id'))) {
            $(this).show();
        }else{
            $(this).hide();
        }
    });
       
    // Sets category link text to match relevant state on page reload
    $("a.ToggleCategory").each(function() {
       
        if($.getCookie(olCategory.attr('id'))) {
            $(this).text("Hide ");
        }else{
            $(this).text("Show");
        }
    });
   
    // Toggles individual Smilie Category display and Toggles link text (Show/Hide)
    $("a.ToggleCategory").click(function(e){
        e.preventDefault();
       
        if(!$.getCookie(olCategory.attr('id'))) {
            $.setCookie(olCategory.attr('id'), 'show', expires);
        }else{
            $.deleteCookie(olCategory.attr('id'));
        }
       
           olCategory.slideToggle(1000);
           $(this).html($(this).text() === 'Hide ' ? 'Show' : 'Hide ');
    });
   
    // Shows ALL Categories
    $("a.ShowAllCats").click(function(e){
        e.preventDefault();
           
        $("ol").each(function() {                // Check all Categories
               
            if(!$.getCookie($(this).attr('id'))) {                 // If they DON'T have a cookie already
                $(this).slideToggle(1000);                        // Slide Open
                $("a.ToggleCategory").text("Hide ");                // Change text to "Hide"
                $.setCookie($(this).attr('id'), 'show', expires);    // And set a cookie for the category
            }
        });
    });
       
    // Hides ALL Categories
    $("a.HideAllCats").click(function(e){
        e.preventDefault();
           
        $("ol").each(function() {            // Check all Categories
           
            if($.getCookie($(this).attr('id'))) {                // If they DO have a cookie already
                $(this).slideToggle(1000);                    // Slide Closed
                $("a.ToggleCategory").text("Show");            // Change text to "Show"
                $.deleteCookie($(this).attr('id'));            // And delete cookie for category
            }
        });
    });
});

I've also tried declaring them outside the $(document).ready(function() and I've tried window.myVariable, myVariable (without using var), I also tried using a "namespace" just to see if I can them to work, but still no joy

Anyway, looking at this, what is it that I am not doing correctly when it comes to the scope?

Any input would be greatly appreciated, thank you in advance