JavaScript (Ajax) + PHP - getting (and changing??) a link depending on PHP function

I am a beginner. I feel like I'm missing something in my thought process. I have tried a number of different things.

I'm coding a simple like button into each post of my site. I have three PHP functions related to this:

• isLiked($id) uses $_Get['id'] for the post and the ip address of the user ($_SERVER['REMOTE_ADDR']) to check if the user has already liked that particular post.
• likes() inserts the "like" into the database - it also uses $_GET['id']
• getLikes($id) gets the number of likes for each $id

likePost.php is a simple page that just calls likes() (Inserts the like to the db) and echoes the result, which is getLikes($id). Yes, I called the function within the function.

The JavaScript I'm working on looks like this (I am NOT promising this is good JS ).

function likeButton() {
    $.ajax({
        url: "../../likes/",  //This is likePost.php, after .htaccess rewrite
        type: "post",
        data: {
            id:id },
        success: function(likes) {
            somethingHereIDontKnowWhat(likes);  //UGH
        }});
}

and my link right now (sans JavaScript) + the number of likes now looks like this:

echo "<br/><div class='right'><a href='../../likes/" . $post->id . "'>
<img src='/images/like.png' title='Like this' alt='Like button'></a>" . getLikes($post->id) . "<div><br/>";

I can't wrap my head around using the JS to run the PHP function (while sending the $post_id to the url to make $_GET['id'], but also using the (same?) JS to print and update the number of likes when the link is pressed. That's at least two things the function is doing at the same time - or am I completely lost?

Which should get me the number of likes (cross your fingers!!), but I need a way to incorporate isLiked() into it, because the link should be disabled if isLiked() = true.

Solution:

So if I'm understanding correctly you want to update the number of likes once a post has been liked and then disable the like button?

First give your div an id, and get rid on the link.

echo "<br/><div class='right' id="post' . $post->id . '">
<img src='/images/like.png' title='Like this' alt='Like button' onClick="likeButton(' . $post->id . ')">" . getLikes($post->id) . "<div><br/>";

Then you can update the contents on the div from the ajax success. This will update the total and remove the like image.

function likeButton(id) {
    $.ajax({
        url: "../../likes/",  //This is likePost.php, after .htaccess rewrite
        type: "post",
        data: {
            id:id },
        success: function(likes) {
            $('#post' + id).html(likes);
        }});
}

Hopefully this was what you were asking for.

Also you shouldn't use the IP address to mark posts as liked. IP addresses can change, also multiple people can use the same IP. It would be better to set a cookie for each post the user has liked.