Trying to learn Jquery/Ajax

[mdmartiny]

Hello Everyone,

 

I have written some code for my version of a like button. So visitors can "like" pages in my website. What I did was use a submit button to make the like button. But just like other submit buttons when you click the page refreshes and it throws of the page view counter.

 

What I am looking to do is use Jquery and Ajax to get the likes from the database and place them on the page without refreshing the page. Since I am a complete newbie when it come to them. I do not know where to begin or to even look. I am hoping that someone can point me in the right direction so that I may start learning how to use Ajax and Jquery.

 

<?php

function like_add() {
    $last = $_GET['l'];
    $first = $_GET['f'];
    $ip = $_SERVER['REMOTE_ADDR'];

    $like_sql = 'Select * from `counter` where first = "' . $first . '" and last = "' . $last . '"';
    $like_result = mysql_query($like_sql);
    $like_row = mysql_fetch_assoc($like_result);
    $like = $like_row['likes'];

    echo "Likes $like";
    echo '<form name="like_add_form" action="" method="POST" class="like_add">
<input type="submit" name="like_add" class="like_add_button" value="Like Me" />
</form>';

    if (isset($_POST['like_add'])) {
        $page_id_sql = "SELECT `page_id` FROM `counter` WHERE first = '$first' AND last = '$last'";
        $page_id_result = mysql_query($page_id_sql);
        $page_id_row = mysql_fetch_assoc($page_id_result);
        $page_id = $page_id_row['page_id'];

        $voted_sql = "Select * FROM `liked_ip` where ip ='$ip' AND page_id='$page_id'";
        $voted_result = mysql_query($voted_sql);
        $voted_num_rows = mysql_num_rows($voted_result);

        if ($voted_num_rows != 0) {
            echo '<div class="error">You have all ready liked this signature</div>';
        }
        else {
            mysql_query("INSERT into `liked_ip` (id,page_id,ip) VALUES ('','$page_id','$ip')") or die(mysql_error());
            mysql_query("UPDATE counter SET `likes` = `likes` + 1 WHERE first = '$first' AND last = '$last'") or die(mysql_error());
        }
    }
}

?>

[spiderwell]

you can do it without forms, i have used one in the list site in my signature. the hlink is to the php code that adds the like, but the jquery takes the link and deals with it, and prevents the link working by returning false:

 

HTML

<div id="like">
<a class="likelink" href="returngenlist.php?action=like&id=46">
<img height="25" border="0" onmouseout="javascript:document.thumbup.src='../images/like.png';" onmouseover="javascript:document.thumbup.src='../images/like_over.png';" alt="I like this list" src="../images/like.png" name="thumbup">
</a>
</div>
[/html]

 
JQuery:
the msg is the returned output from the hlink above, so it will be a number 1 above its previous state.
[code]
$(function() {
    $('.likelink').click( function() {
           $.get( $(this).attr('href'), function(msg) {
           $("#liketotal").text(msg);
            });
            return false; // don't follow the link!
     });
}); 

 

I hope this helps

 

 

[mdmartiny]

Thank you for the help.. I goggled some more and found a solution to my situation. I am just know trying to find somewhere that I can learn about Jquery,

 

[spiderwell]

theres plenty of resouces out there, and google can find most of them for you.