Using ajax to transform links after they have been clicked to update a database

[johndoe]

On a page I have links (produced by a PHP loop) which look like this:

<div class="tools">
<a href="processor.php?c=cars&p=2&s=d&u=i&link=5&pid=999999990" title="Click to LIKE this photo" class="like do_like">&nbsp;</a>
</div>

<div class="tools">
<a href="processor.php?c=cars&p=2&s=d&u=d&link=6&pid=999999991" title="Click to UNLIKE this photo" class="like do_unlike">&nbsp;</a>
</div>

Note that each link has two classes: firstly a "like" class, and then either a "do_like" class or a "do_unlike" class, according to whether it's a link to "like" or a link to "unlike". (Originally I only had the "do_like" and "do_unlike" classes, as they're used to transform the link via css into a rollover-type image/icon, but I added the "like" class as well, as I thought it might be needed to do the ajax - see below.)

When a user clicks one of these links, the receiving processor.php script takes the key-value pairs from the query string, and uses them to update a database and then build a new form of the link. (The new form of the link is such that a "like this" link turns into an "unlike this" link, and vice-versa.) It does all this successfully.

What I want to do is use ajax (as I understand, best using jquery) to insert this newly built link in place of the one that was clicked, without having to refresh the page.

As I understand it, to make this happen, I need to include jquery, and also place a js function in the head section of the page. I tried this js function suggested on another forum for the purpose:

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

This function doesn't work at all, however. All that happens is, the browser goes to the processor.php page, which echoes the newly built link.

What function would work for me?

[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.)

[johndoe]

I removed the class from the links that turned them via css into rollover images. Now they're just text links, like this:

<div class="tools">
<a href="processor.php?c=cars&p=2&s=d&u=i&link=5&pid=999999990" title="Click to LIKE this photo" class="like">like</a>
</div>

(I also removed the "link.append" and the "fadeOut".)

Now my problem is that, although the ajax function successfully replaces the link address, it doesn't replace the link's class, or its title.

The receiving processor.php script takes the variables from the link's query string in the links as above, and returns a new replacement link address in this form (example of a "like" link being replaced with an "unlike link"):

processor.php?c=cars&p=2&s=d&u=d&link=5&pid=999999990

The "u" variable in the query string determines whether or not the processor.php page will insert the data into the database in the case of a "like" (u=i), or delete the data from the database in the case of an "unlike" (u=d).

But how can I modify the javascript function and/or the returned replacement link so that the link's class and its title is replaced, as well as the address?