1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Using Jquery to set and check cookies

Discussion in 'XenForo Development Discussions' started by RichardKYA, Feb 28, 2016.

  1. RichardKYA

    RichardKYA Well-Known Member

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

    Thank you
     
  2. RichardKYA

    RichardKYA Well-Known Member

    OK, trying this...

    Code:
    $.setCookie(div.attr('id'), 'show', 86400 * 365);
    alert("Cookie Created!");
    
    ...gives me this in the console log...

    Code:
    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
     
  3. Chris D

    Chris D XenForo Developer Staff Member

    The third argument needs to be a JavaScript Date object (rather than the number of seconds).
    Code:
    var expires = new Date(new Date().getTime() + 365 * 86400000); // 365 days
    $.setCookie(div.attr('id'), 'show', expires);
    alert("Cookie Created!");
     
    Pierce, Thomas.B and RichardKYA like this.
  4. RichardKYA

    RichardKYA Well-Known Member

    Ah, I see!

    Thank you Chris (y)
     
  5. RichardKYA

    RichardKYA Well-Known Member

    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 :p

    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...

    Code:
    $(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
                }
            });
        });
    });

    Code:
    $(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 :)
     

Share This Page