Cookie update

[budimir]

Hi everyone,

 

I'm strugling with javascript and updating cookie value, so I would like to ask for some help. I'm using bootstrap wizard and offer user some options to select. I would like to store that choice into cookie, but the problem I'm runing into is when user clicks on Cost and clicks Next on second step and then he decides to go back and make antoher choice and he chooses Custom, cookie is not updated with new value. I have to refresh page for couple of times before cookie changes it's value.

 

Below is my code I'm using to update and remove cookie so please help me and clarify me why cookie is not updated without refreshing screen for couple of times???

<script type='text/javascript'>
        $('input:radio').on('change', function() {
            if ($(this).val() === "Cost") {
                $.cookie('calc', 'Cost')
            } else {
                $.removeCookie('calc', { path: '/' });
            }

            if ($(this).val() === "Competition") {
            $.cookie('calc', 'Competition')
            } else {
                $.removeCookie('calc', { path: '/' });
            }

            if ($(this).val() === "Customer") {
                $.cookie('calc', 'Customer')
            } else {
                $.removeCookie('calc', { path: '/' });
            }

            if ($(this).val() === "Custom") {
                $.cookie('calc', 'Custom')
            } else {
                $.removeCookie('calc', { path: '/' });
            }
        });
        </script>

[requinix]

The cookie parameters need to be the same every time you access it. That means including path:/ when setting the cookie, not just when removing it.

 

Are you sure that the cookie is not set? You've manually checked the value in your browser? So it's definitely not the case that the cookie is set correctly but the page is not showing the right... whatever it shows?

[budimir]

Yes, I can see value which is displaying.

 

For example I select Cost and click to go to second step and there I can see it's displaying Cost, but when I go back to first step and select Customer and again go to second step the value didn't change from Cost. Strange thing is that I need to hit F5 and refresh browser exactly two times for new selection to work. I mean I hit F5 twice then make a new selection go to step two and I can see my new selection.

 

Same thing is hapening all the time? Do you have any idea why I need to refresh two times so I could get my new value?

Edited December 20, 2016 by budimir

[requinix]

First, can you verify whether and when the cookie is being set? Forget the appearance of the page and look at the cookie directly through your browser's developer tools.

[budimir]

Yes, I can see it. It is created. It doesn't say any time when is created, but I can see it is created when radio is selected.

[budimir]

Oh, OK. Now I can see that cookie immediatly gets new value, but the page is not displaying it when I go to second step.

 

What do I need to do to get the value at the same moment when I get to second step?

[requinix]

Fix the code? You didn't post that part.

[budimir]

I'm using PHP to view cookie value, but obivously it's not working properly.

<?php echo "$COOKIE['calc']"; ?>

What javascript code would be to see cookie value in real time (without refreshing page)?

[requinix]

$.cookie can both get and set the cookie.

[budimir]

For some reason I can't get it to work. Could you give me an example how to get cookie value and display it to see the value?

[maxxd]

The cookie superglobal in PHP is $_COOKIE[], not $COOKIE[]. So that may be part of the problem you're seeing. And as long as you're using the jQuery cookie plugin (which I assume you are from the snippet you posted), you should be able to read the contents of the cookie with:

console.log($.cookie('calc'));

See this SO question for more details. Also note that the jQuery cookie plugin has been deprecated in favor of a non-jQuery dependent version.