Browser won't set cookie from an onclick event

Question

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.com/uk">
        <span>Enter UK site</span></a></li>
    <li id="us"><a href="http://www.example.com/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.com/us";
        }
    );
});

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

Answer 1

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.

Answer 2

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'});
    });
});

Answer 3

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.com/uk">
            <span>Enter UK site</span></a></li>
    <li id="us"><a href="www.example.com/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)

Answer 4

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.