Setting a cookie based on the name of the link that is clicked
TL; DR On clicking a link, I want to assign a cookie with the tool name and text value of the clicked link.
Using JQuery.1.4.2.min.js, Jquery.cookie.1.0.js
I am trying to create a cookie when a link is clicked (always links to "page.html").
instrument name
TEXT value
So far I am trying to use:
<script type="text/javascript" src="scripts/jquery-1.4.2-min.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie-1.0.js"></script>
Link1:
<a href="page.html">link1</a>
Link2:
<a href="page.html">link2</a>
Script:
$('a[href=page.html]').click(function()
{
var name = 'instrument';
var value = $(this).text();
$.cookie(name, value, { expires: 365 });
});
When I click on the link, it just downloads the link and no cookie is set. Debugging with firebug, firecookie, firequery. No cookie found for tool or anything down the line. Onload I will click
" <a href="page.html">projects</a>
" but not
" $.cookie(name, value, { expires: 365 });
".
Even using below: (Thanks to Sarfraz )
$('a[href="page.html"]').click(function(e)
{
// prevent default action
e.preventDefault();
var name = 'instrument';
// get link text
var value = $(this).text();
// set cookie
$.cookie(name, value, { expires: 365 });
// now go to link location
document.location.href = $(this).attr('href');
});
Still no cookie will be created.
If you add a breakpoint on $.cookie~
even if one of the links is clicked, it doesn't hit the breakpoint, ordocument.location.href~.
For Zack:
Preview -
<script type="text/javascript" src="http://localhost/tree"></script>
After rendering -
"<div class="dtree">
<div class="dTreeNode"><img alt="" src="Images/base.png" id="id0"><a onclick="javascript: d.s(0);" href="home" class="node" id="sd0">Home</a></div>"
a source to share
This is hacky, but it works for me.
$(document).ready( function() {
$('a.cookier').each( function() {
// Kill the link link feature.
_href = $(this).attr('href');
$(this).attr("rel", _href).attr("href", "javascript:void(0);");
});
$('a.cookier').click(function() {
var name = 'instrument';
var value = $(this).text();
$.cookie(name, value, { expires: 365 });
// Go places
document.location.href = $(this).attr('rel');
});
});
My markup looks like this:
<a class="cookier" href="hrrrngh.html">Shazam!</a>
I use a similar technique to "un-link" my links in pages using AJAX, but should degrade gracefully.
Note. You probably want to choose a class class than "cookier".
Edit:
You can choose those <a>
there with any of them, choose which one not to choose other materials on the page.
.dtree img + a
.dTreeNode > a
.dTreeNode a.node
.dTreeNode a[onclick=|javascript].node
a source to share
Try the following:
$('a[href="page.html"]').click(function(e)
{
// prevent default action
e.preventDefault();
var name = 'instrument';
// get link text
var value = $(this).text();
// set cookie
$.cookie(name, value, { expires: 365 });
// now go to link location
document.location.href = $(this).attr('href');
});
a source to share
Using the answer from Zack above, I changed the element tag. The only problem is it will set a cookie for some link to be used for the link I want or not, but it sets the cookie and works where needed. IF there is a clearer approach would be appreciated.
$(document).ready( function() {
$('a[href="page.html"]').each( function() {
// Kill the link link feature.
_href = $(this).attr('href');
$(this).attr("rel", _href).attr("href", "javascript:void(0);");
});
$('a').click(function() {
var name = 'instrument';
var value = $(this).text();
$.cookie(name, value, { expires: 365 });
// Go places
document.location.href = $(this).attr('rel');
});
});
Massive thanks to Sarfraz and Zack for all the help, at least I have something that works now ^^
a source to share