[johndoe]

Yes I did realise that jquery isn't necessary, but I got the impression it helped in the sort of problem I was looking to solve, but thanks for the reminder.

I found that the function works if I wrap the code in a document.ready callback to ensure that it executes after the DOM has loaded:

<script type="text/javascript">
$(function() { // Shorthand for $(document).ready(function() {
      $('a.like').click(function(e) {
            e.preventDefault();
            var link = $(this);
            $.get(link.attr('href'), function(data) {
                  console.log('Successful! ' + data);
                  link.attr('href', data).append(' was toggled');
            });
            link.parents('div.tools').fadeOut('slow');
      });
});
</script>

... though I still have problems with the "link transformed by css into a rollover button-image-icon" effect, achieved by css like this:

<style type="text/css">

.do_like {
width:15px;
height:15px;
background-image:url('images/mysprite.jpg'); //image is 30px wide and 15px high
background-position:15px 0px;
overflow:hidden;
}

.do_like:hover, .do_like:active {
background-position:0px 0px;
}

</style>

I used that on each of the links to be transformed by the js/ajax, as a visual cue as to whether the item was "liked" or not, but after the click and the ajax call, the effect on hover is still as it was before the click. It requires a page refresh to update the css and make it work, which rather defeats the object of the ajax.

(I removed the fadeout effect, which broke my layout, but obviously that has nothing to do with the css "link transformation" not working after the click.)