Setting a cookie based on the name of the link that is clicked.

Question

TLDR When clicking on a link I want to assign a cookie with a name of instrument and a value of the text on the link clicked.

Using Jquery.1.4.2.min.js, Jquery.cookie.1.0.js

---

I am trying to create a cookie when a link is clicked (will always link to "page.html").

name of instrument

value of the TEXT

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 the link it just loads the link and no cookie is set. Debugging with firebug, firecookie, firequery. No cookie for instrument or anything along the lines is found. Onload I'll hit the

"<a href="page.html">projects</a>" but not the

"$.cookie(name, value, { expires: 365 });" at all.

Even using the 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's location
 document.location.href = $(this).attr('href');
});

Still will not create the cookie.

If I add a breakpoint onto $.cookie~ even on clicking one of the links it does not hit the breakpoint nor the document.location.href~.

For Zack:

Pre Render - <script type="text/javascript" src="http://localhost/tree"&gt;&lt;/script&gt;

After Render -

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

Answer 1

Try this:

$('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's location
 document.location.href = $(this).attr('href');
});

Answer 2

var value = $(this);

will assign the jQuery object to value. Use

var value = $(this).text();

or

var value = $(this).attr('href');

Kind Regards

--Andy

Answer 3

This is hackish, but it works for me.

$(document).ready( function() {
    $('a.cookier').each( function() {
        // Kill the link's 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 method for "un-linking" my links on pages that use AJAX but must degrade gracefully.

Note: You'll probably want to pick a classier class than "cookier."

Edit:

You could select those <a>'s in there with any of these, pick whichever doesn't select other stuff on the page.

.dtree img + a
.dTreeNode > a
.dTreeNode a.node
.dTreeNode a[onclick=|javascript].node

Answer 4

Using the answer from Zack above I changed the element tag. The only issue is it will set the cookie for whichever link is followed wether it be for the link I want or not but it sets the cookie and works for where it is needed. IF there is a cleaner approach it would be appreciated.

$(document).ready( function() {
    $('a[href="page.html"]').each( function() {
        // Kill the link's 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 for now ^^