Geek Answers Handbook

Browser will not set cookie from onclick event

I am pulling my hair out with this error, although I am sure that this is something obvious. Sorry if so.

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 bind the same code to the onclick event, for example ...

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

.. he no longer sets a cookie! Despite the fact that the same code is called executed in exactly the same way (I go through it in order and see everything as it should be).

Repeat: javascript shoots great. I go through setCookie.php and everything is the same ... except for the cookies at the end of it.

What's happening? I assume this is browser security or something like that?

For anyone interested, here is 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>
+4
source share
4 answers

I don’t see anything that stops the normal link passing through? If you don’t have anything that would interfere with the normal a href , then there will be no time to execute the $.post request before the page changes.

Try the following:

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

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

+9
source

Put this code where the <script> tags are: (I assume head>)

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

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

I suppose what I would do in this situation is to change 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 advise you not to use JavaScript \ jQuery inside your HTML, just use document.ready () and bind your events (unless of course you use jQuery)

0
source

Most likely because it is trying to access jQuery ( $ ) before creating it. It is best to use document.ready from your first example for this.

-1
source

More articles:


All Articles