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

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

Solution 1

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

Solution 2

var value = $(this);

will assign the jQuery object to value. Use

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

or

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