I'm pulling my hair out with this bug, although I'm sure it's something obvious. Apologies if it is.

The following javascript successfully sets my cookie:

<script type="text/javascript">
$(document).ready(function(){
    $.post('../setCookie.php',{'region':'test'});
});
</script>

But as soon as I tie the same code to an onclick event, like so...

<script type="text/javascript">
$(document).ready(function(){
    $("#us a").click(function(){
        $.post('../setCookie.php',{'region':'en-us'});
    });
    $("#uk a").click(function(){
        $.post('../setCookie.php',{'region':'en-gb'});
    });
});
</script>

<ul>
    <li id="uk"><a href="">
        <span>Enter UK site</span></a></li>
    <li id="us"><a href="">
        <span>Enter US site</span></a></li>
</ul>

..it no longer sets a cookie! Even though the same code is called an executed in exactly the same way (I step through it fine, and see everything as it's supposed to be).

Repeat: The javascript is firing fine. I am stepping through setCookie.php and everything is the same... except no cookie at the end of it.

What's going on? I'm guessing it's browser security or something?

For anyone who's interested, here's how I solved it:

<script type="text/javascript">
$(document).ready(function(){
$("#us a").click(function(e){
    e.preventDefault();
    $.post('../setCookie.php',{'region':'en-us'},
        function() {
            window.location = "";
        }
    );
});

$("#uk a").click(function(e){
    e.preventDefault();
    $.post('../setCookie.php',{'region':'en-gb'},
        function() {
            window.location = "";
        }
    );
});
});
</script>

I'm pulling my hair out with this bug, although I'm sure it's something obvious. Apologies if it is.

The following javascript successfully sets my cookie:

<script type="text/javascript">
$(document).ready(function(){
    $.post('../setCookie.php',{'region':'test'});
});
</script>

But as soon as I tie the same code to an onclick event, like so...

<script type="text/javascript">
$(document).ready(function(){
    $("#us a").click(function(){
        $.post('../setCookie.php',{'region':'en-us'});
    });
    $("#uk a").click(function(){
        $.post('../setCookie.php',{'region':'en-gb'});
    });
});
</script>

<ul>
    <li id="uk"><a href="http://www.example./uk">
        <span>Enter UK site</span></a></li>
    <li id="us"><a href="http://www.example./us">
        <span>Enter US site</span></a></li>
</ul>

..it no longer sets a cookie! Even though the same code is called an executed in exactly the same way (I step through it fine, and see everything as it's supposed to be).

Repeat: The javascript is firing fine. I am stepping through setCookie.php and everything is the same... except no cookie at the end of it.

What's going on? I'm guessing it's browser security or something?

For anyone who's interested, here's how I solved it:

<script type="text/javascript">
$(document).ready(function(){
$("#us a").click(function(e){
    e.preventDefault();
    $.post('../setCookie.php',{'region':'en-us'},
        function() {
            window.location = "http://www.example./us";
        }
    );
});

$("#uk a").click(function(e){
    e.preventDefault();
    $.post('../setCookie.php',{'region':'en-gb'},
        function() {
            window.location = "http://www.example./uk";
        }
    );
});
});
</script>

• php
• javascript
• jquery
• cookies

• Any reason you're using an ajax call for this cookie, instead of just doing document.cookie = ...? JS is perfectly capable of setting cookies on its own without involving PHP via AJAX. – Marc B Commented May 29, 2011 at 0:55
• @Marc, I've tied it to a class that I'm using elsewhere in the project. It's just tidier to keep it all together, I think. But otherwise, no. – Chuck Le Butt Commented May 29, 2011 at 1:04
• @Marc, Would $_COOKIE[] even have time to fire anyway? – Chuck Le Butt Commented May 29, 2011 at 1:11
• $_COOKIE is populated by the cookies sent from the client at the time the script starts up. it will NOT change to acodate any setcookie() calls you make from within the script. Any cookies you do set in PHP will only show up in $_COOKIE on the NEXT invocation of the script. – Marc B Commented May 29, 2011 at 17:01
• Good point. I meant $.cookie (via JQuery), but it's ok now, it's working fine, thanks. – Chuck Le Butt Commented May 29, 2011 at 18:57

4 Answers 4

I don't see anything stopping the normal link click going through? If you have nothing preventing the normal a href to go through, there won't be any time to do the $.post request before the page changed already.

Try the following:

$(document).ready(function(){
    $('a').click(function(e){
        e.preventDefault();
        $.post('../setCookie.php',{'region':'test'});
    });
});

It will stop the page change for links, but at least should pass the cookie. Now, if you want the page to be loaded as well, then add a onComplete method to the request, so that once the cookie data has been succesfully sent, you can then continue the page change.

Place this code where the < script > tags is at: (I assume the < head >)

$(document).ready(function(){
    $("#us a").click(function(){
        $.post('../setCookie.php',{'region':'en-us'});
    });

    $("#uk a").click(function(){
        $.post('../setCookie.php',{'region':'en-gb'});
    });
});

If it was a security issue , you will see an error on your console (firebug\webkit\IE dev tools)

I suppose what I would do in this situation is changing the click event and put it here:

<script type="text/javascript">
$(document).ready(function(){
$("#someid > li").click(function(){
    $.post('../setCookie.php',{'region':$(this).attr("id")});
}); 
});
</script>

and then..:

<ul id="someID">
    <li id="uk"><a href="http://www.example./uk">
            <span>Enter UK site</span></a></li>
    <li id="us"><a href="www.example./us">
                <span>Enter US site</span></a></li>
</ul>

I advice not to use JavaScript \ jQuery inside your HTML , just use document.ready() and bind your events (if you use jQuery of course)

Most likely because it's trying to access jQuery ($) before it's created. It would be best to use document.ready from your first example for this.