After button clicked, save to MySQL then display CSS highlight - php

Question

I've got a Rating function that does as follows: Once a user clicks the +1 button, the rating goes up by 1, and saves to MySQL. What I'd like for it to do is once clicked, it changes
the background to a different color as shown below..
( What I'd like for it to do is the "once clicked" ) at the current moment it just updates the number with the background being white)
NOTE: I'm just asking for suggestions or some way to lead me in the right direction, thank you in advance.
Without being clicked:
Once clicked:
php/html form: to submit the +1
<div class="up vote" name="voteUp" id="<?php echo $post_iD;?>">
<div class="wrapper">+<?php echo $VoteRate;?></div>
</div>
AJAX: to update the button
$(function()
{
$(".vote").click(function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if (name=='voteUp')
{
$.ajax(
{
type: "POST",
url: "voting/up_vote.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
}
});
}
return false;
});
});
up_vote.php: submit from the ajax
$ip = $_SERVER['REMOTE_ADDR'];
if($_POST['id'])
{
$sth = $db->prepare("SELECT add_iP FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip");
$sth->execute(array(':id' => $_POST['id'], ':ip' => $ip));
if( $sth->fetchColumn() == 0)
{
$sth = $db->prepare("UPDATE posts set voteUp = voteUp+1 where post_iD = :id");
$sth->execute(array(':id' => $_POST['id']));
$sth = $db->prepare("INSERT into PostsRating (post_iD_fk, add_iP) VALUES (:id, :ip)");
$sth->execute(array(':id' => $_POST['id'], ':ip' => $ip));
} else {
$sth = $db->prepare("UPDATE posts set voteUp = voteUp-1 where post_iD = :id");
$sth->execute(array(':id' => $_POST['id']));
$sth = $db->prepare("DELETE FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip");
$sth->execute(array(':id' => $_POST['id'], ':ip' => $ip));
}
$sth = $db->prepare("SELECT voteUp FROM posts WHERE post_iD = :id");
$sth->execute(array(':id' => $_POST['id']));
$row = $sth->fetch();
echo $row['voteUp'];
}

Answer 1

In your success callback, why not just set a class to the parent and then update the .wrapper?
success: function(html)
{
parent.addClass("blue");
parent.find(".wrapper").html("+ " + html);
}
When the user refreshes the page and you want to continue to show the blue, you would simply:
<?php
$ip = $_SERVER['REMOTE_ADDR'];
$sth = $db->prepare("SELECT add_iP FROM PostsRating WHERE post_iD_fk = :id AND add_iP = :ip");
$sth->execute(array(':id' => $post_iD, ':ip' => $ip));
$class = ($sth->fetchColumn()) ? " blue" : "";
?>
<div class="up vote<?php echo $class; ?>" name="voteUp" id="<?php echo $post_iD;?>">
<div class="wrapper">+<?php echo $VoteRate;?></div>
</div>

Answer 2

You can change the success function to add the color with .css("background-color","blue") or if you want to have it always blue if the vote_counter is higher than you can add this to the top of your code:
if (parseInt($("#"+id).children(".wrapper").text()) >= 1) {
$("#"+id).children(".wrapper").css("background-color","blue");
}

Answer 3

First of all, you can not have a class name with a space in it - it will be interpreted as two classes, up and vote.
Within the php you can echo something along the lines of (be sure to set dataType to json)
echo(json_encode(array("success"=>true)));
exit();
After which the jquery can handle the response:
function(result) {
var result_string = jQuery.parseJSON(result);
if(result_string.success) {
$(this).children(".wrapper").css("background-color", "blue")
}
}