0

I have three buttons that add parameters to my url - something like this: 

<a class="click1">/a> = ?param=grid
<a class="click1">/a> = ?param=smallgrid
<a class="click1">/a> = ?param=largegrid

These buttons shows three different layout - the first one is set as default.

I want to place the users choice in a cookie - but I need the url only to be added to the relevant pages.

The url looks like this: 

 /products/Computers/Notebooks?param=list

so I want the cookie to execute the choice based on the url has /products or even better - a body class if possible.

I have added the jquery.cookie.js plugin to my site - but i cant figure out how to use it.

Jerry Svensson
  • 277
  • 1
  • 3
  • 18

1 Answers1

1

This SO answer shows a very basic usage of the JQuery Cookie library. Basically the usage is $.cookie(<cookie-key>, <cookie-value>, {<additional data about cookie>}). (This is obviously pseudocode). This will write a key/value cookie to the browser, which will last as long as you specify and can be fetched via $.cookie("<cookie-key>") and deleted via $.removeCookie("<cookie-key>").

So for your use case, it might look like this:

HTML
<a id="gridbtn" class="click1"></a>
<a id="smallgridbtn" class="click1"></a>
<a id="largegridbtn" class="click1"></a>

// JQuery
$(document).ready(function() {
    // After page load
    var cookieLayoutValue = $.cookie("layout");

    console.log("The cookie value was " + cookieLayoutValue);

    if (cookieLayoutValue === "grid") {
        // process "grid" layout
    } else if (cookieLayoutValue === "smallgrid") {
        // process "smallgrid" layout
    } else if (cookieLayoutValue === "largegrid") {
        // process "largegrid" layout
    } else {
        // cookie doesn't exist, default it to grid
        $.cookie("layout", "grid", { expires : 999 });
       // process "grid" layout
    }

    //
    // call layout code for whatever the value is using if/else
    //

    // Wire up some click handlers
    $("#gridbtn").click(function() {
        var layout = $.cookie("layout");
        $.cookie("layout", "grid", { expires : 999 });

        // If the layout has changed
        if (layout !== "grid") {
            // Do "grid" layout processing
        }            
    });

    // Wire up some click handlers
    $("#smallgridbtn").click(function() {
        var layout = $.cookie("layout");
        $.cookie("layout", "smallgrid", { expires : 999 });

        // If the layout has changed
        if (layout !== "smallgrid") {
            // Do "smallgrid" layout processing
        }            
    });

    // Wire up some click handlers
    $("#largegridbtn").click(function() {
        var layout = $.cookie("layout");
        $.cookie("layout", "largegrid", { expires : 999 });

        // If the layout has changed
        if (layout !== "largegrid") {
            // Do "largegrid" layout processing
        }            
    });
});

Otherwise, you'd have to send the information you want in the cookie to the server for processing. I'd recommend a RESTful service via Spring Framework and then set the cookie in the response like this.

Community
  • 1
  • 1
Blake Neal
  • 325
  • 4
  • 13
  • Hi and thanks. i did come across that post - I still don´t understand how to write the cookie for my specific needs though. It´s very interesting but a bit hard to grasp. – Jerry Svensson Apr 04 '16 at 12:13
  • Added a use case to help clarify – Blake Neal Apr 04 '16 at 12:32
  • Hmm that did clarify a little- interesting. So I basically add the script for my layouts for each handler. stupid question - I do need to save this as its own .js or can i use it as regular script and ad it to my existing script file? Thanks again. – Jerry Svensson Apr 04 '16 at 12:36
  • You can do either. You can call a vanilla function from a JQuery click handler (since JQuery is Javascript under-the-hood). Normally HTML (including any Javascript tags) are parsed from the top-down, so adding this to the end of your HTML doc before the

    tag will catch this code at the right time. Rewriting the cookie value means that a page refresh will pick up the last value and run with it. I've updated the snippet a bit more to show this (at the top near the $(document).ready() call.

     – Blake Neal Apr 04 '16 at 12:41
  • Ok clear. Thanks you very much - now I have something to work with and study, thanks again! – Jerry Svensson Apr 04 '16 at 12:46
  • I added a bit more to make it clear about calling the layout code from multiple places, just didn't add the stubbed out Javascript functions – Blake Neal Apr 04 '16 at 12:47
  • Ah i see. I just tried the code - in console it doesn't throw any errors - so the scripts seems to load in the correct order. however - it doesn´t seem to do anything - it still show me the default layout after clicking on another layout. Do I need to do something else to execute the cookie data for the next visit? – Jerry Svensson Apr 04 '16 at 12:59
  • Whoops! I didn't make the IDs in the anchor HTML tags consistent with what I used in the JQuery code. I've updated them in the answer. That should do the write out of the cookie. You should write some units tests to make sure that JQuery cookie is working properly, and use console.log to see the results of those tests – Blake Neal Apr 04 '16 at 13:07
  • Not sure how to do that.. Im looking in the chrome developer tools - resources - cookies and i can find the cookie there. For some reason nothing happends when re-visiting the url though. – Jerry Svensson Apr 04 '16 at 13:59
  • If you can see the cookie, that's a good sign. I've updated the answer to show console.log usage. In Chrome Developer Tools, there is a Console tab which shows anything you log or any errors caught by Chrome. In the code above, if you keep seeing "grid" print out after every page refresh, then the value isn't being overwritten. You'll have to change the code to remove the current cookie and replace it with the new value ($.removeCookie("layout"); $.cookie("layout", "", { expires : 999 });) – Blake Neal Apr 04 '16 at 14:17
  • I tried to set a alert message on each handler - and it does indeed work. The script I have for each layout is a bit complex - how do I integrate this towards the cookie, do I wrap the code to only appear in the cookie instead? – Jerry Svensson Apr 04 '16 at 14:19
  • It's probably best to modularize the code into functions, then externalize it to a separate .js file. then just import the .js file in the section of each HTML file. That way you can just have the $(document).ready(function() {}); code in each HTML page that will get the cookie value and call the right JS function based on the value. There is a max size restriction on all cookies for a given site (clarified here: http://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key), so it really shouldn't be done this way. – Blake Neal Apr 04 '16 at 14:29
  • It seems to fetch the right value from the cookie on each click - it doesnt load the code i want though from the value. the code is a bit complex, and it does work. I need to break it down and try to make it work a you wrote - thanks for all the help. – Jerry Svensson Apr 04 '16 at 14:45