Improving this AJAX function to update a "like this" link - php

Question

I asked a question about this but the post degenerated into confusion which lost the gist of the problem. Basically I'm trying to set up ajax so that a "like" or "unlike" link updates a database and shows the new status without having to refresh the page.
So I have a "view.php" page with links which are produced by a PHP loop. They look like this:
<div class="tools">
like
</div>
<div class="tools">
unlike
</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" respectively. (Originally I only had the "do_like" and "do_unlike" classes, which I was using to transform the link via css into a rollover-type image/icon, but I added the "like" class as well, for the ajax - see below.)
When a user clicks one of these links, the receiving processor.php script takes the variable-value pairs from the query string, and uses them to update a database, and then build a new form of the link, which it echoes out. The new form of the link is such that a "like this" link turns into an "unlike this" link, and vice-versa. So for the first "like" link above, the database returns:
processor.php?c=cars&p=2&s=d&u=d&pid=999999990
It's the "u" variable in the query string which determines whether or not the processor.php page will either 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). (I'm using prepared PDO statements for the database inserts/deletions.)
I'm using jquery/ajax to insert this newly built link in place of the one that was clicked, without having to refresh the page.
To do this, in the "view.php" page I included jquery.js and used the following javascript function:
<script type="text/javascript">
$(function() {
$("a.like").click(function(e){
e.preventDefault();
var link = $(this);
$.get(
$(this).attr('href'),
function(data){
link.attr('href',data);
});
});
});
</script>
The problem is, although this function sends the data to the processing script OK, and changes the link's href attribute in the page without a page refresh (I can see it's doing this OK by copying the link in the browser after a click), it doesn't change the link's text, class or title. So I as it is, I have to refresh the page to see any visual cues that the link has in fact changed (I might as well just use a header redirection in the processor.php page).
How can I modify the function (or change it) so that it also replaces the link's text, class and title? So that (for example, transforming a "like" link):
like
becomes:
unlike
?

Answer 1

You need to change the class and the title then also:
[...]
$.get(
$(this).attr('href'),
function(data){
link.attr('href',data);
link.toggleClass('do_like do_unlike');
link..attr('title', 'change title here');
});

Answer 2

Use an if condition to check the current state and update the attributes.
$(function () {
$("a.like").click(function (e) {
e.preventDefault();
var link = $(this);
var alreadyLiked = (link.text() == "UnLike") ? true : false;
$.get(link.attr('href'), function (data) {
link.attr('href', data);
if (alreadyLiked) {
link.removeClass("do_unlike").addClass("do_like").text("Like").attr("title", "Click to LIKE this photo");
}
else {
link.removeClass("do_like").addClass("do_unlike").text("UnLike").attr("title", "Click to UN LIKE this photo");
}
alreadyLiked = !alreadyLiked;
});
});
});
This code will work. Tested. Assuming every time the get request gives you the url (for deleting/inserting ) correctly.

Answer 3

This is based on both Shyju's and Pitchinnate's responses (so thanks to both!), and it works a treat using the css rollover link-transformation method (I also included a fade effect):
<script type="text/javascript">
$(function() {
$("a.like").click(function(e){
e.preventDefault();
var link = $(this);
$.get(
$(this).attr('href'),
function(data){
link.attr('href',data);
link.toggleClass('do_like do_unlike');
var titleState=(link.attr("title") == "Click to LIKE this photo") ? "no" : "yes";
if(titleState=="yes")
{
link.attr('title', 'Click to LIKE this photo');
}
else
{
link.attr('title', 'Click to UNLIKE this photo');
}
});
$(this).parents('div.tools').fadeOut(1000);
$(this).parents('div.tools').fadeIn('slow');
});
});
</script>