Multiple votes on one page - php

Question

I have multiple images on the page. Each of the image has thumb up and thumb down and user is able to vote.
The problem is when user vote on the first image vote is changed but when he click on second image the vote is saved in database but isn't updated and changed on the page. When the page is refreshed the vote counter is updated.
Those are the button and votings for the image
$cookie_name = 'vote'.$row['image_id']; // Set up the cookie name
$value = $pdo->prepare('SELECT * FROM tc_tuto_yt_voting_system WHERE image_id= ?'); // BDD query, page ID values
$value->bindParam(1, $row['image_id'], PDO::PARAM_INT);
$value->execute();
$vote = $value->fetch();
echo '
if (isset($_COOKIE[$cookie_name])) {
echo '<div class="vote_up_done oneLine"></div>
<div class="numberVoted oneLine">'.$vote['positive'].'</div>';
}
else
{
echo '<div class="vote_up oneLine" id="voteUp"></div>
<div class="number oneLine" id="positive">'.$vote['positive'].'</div>';
}
if (isset($_COOKIE[$cookie_name])) {
echo '<div class="vote_down_done oneLine"></div>
<div class="numberVoted oneLine">'.$vote['negative'].'</div>';
}
else
{
echo '<div class="vote_down oneLine" id="voteDown"></div>
<div class="number oneLine" id="negative">'.$vote['negative'].'</div>';
}
Vote up&down is ajax driven so this is ajax part
function vote(type, value, image_id) {
var dataFields = {'type': type, 'value': value, 'image_id': image_id}; // We pass the 3 arguments, type: positive or negative ; value=1 ; pageId: here 5
$.ajax({ // Ajax
type: "POST",
url: "ad_vot.php",
data: dataFields,
timeout: 3000,
success: function(dataBack){
$('#' + type).html(dataBack); // Change the new value in id="positive" or id="negative" DIV
$('#voteUp').attr('class', 'vote_up_done oneLine'); // Change image by design/vote-up-done.png grey icon
$('#voteDown').attr('class', 'vote_down_done oneLine'); // Change image by design/vote-down-done.png grey icon
$('#positive').attr('class', 'numberVoted oneLine'); // Change the number's color by a grey one for the "positive" DIV
$('#negative').attr('class', 'numberVoted oneLine'); // Change the number's color by a grey one for the "negative" DIV
$('#message').html('<div id="alertFadeOut" style="color: green">Your vote is added!</div>'); // Diplay message with a fadeout
$('#alertFadeOut').fadeOut(3000, function () {
$('#alertFadeOut').text('');
});
},
error: function() {
$('#message').text('Vote fail. Please try again.');
}
});
}
UPDATE: vote and update
if( $result > 0) {
$query = $pdo->prepare('UPDATE tc_tuto_yt_voting_system SET '.$type.' = '.$type.' + 1 WHERE image_id= :image_id');
$query -> execute(array(
":image_id" => $_POST['image_id']
));
}
else
{
$type = $_POST['type'];
$value = $_POST['value'];
$image_id = $_POST['image_id'];
$query = $pdo -> prepare("INSERT INTO tc_tuto_yt_voting_system (image_id,positive,negative)
VALUES (:image_id, :positive, :negative)");
$query -> execute(array(
":image_id" => $_POST['image_id'],
":positive" => '0',
":negative" => '0'
));
$query = $pdo->prepare('UPDATE tc_tuto_yt_voting_system SET '.$type.' = '.$type.' + 1 WHERE image_id= :image_id');
$query -> execute(array(
":image_id" => $_POST['image_id']
));
}
$value = $pdo->prepare('SELECT * FROM tc_tuto_yt_voting_system WHERE image_id= ?'); // BDD query, page ID values
$value->bindParam(1, $_POST['image_id'], PDO::PARAM_INT);
$value->execute();
$result = $value->fetch();
$expire = 24*3600; // 1 day
setcookie('vote'.$image_id, 'voted', time() + $expire, '/'); // Place a cookie
echo $result[$type];

Answer 1

A better answer:
Don't store the votes in cookie. The user can change it, delete it, and he'll be able to vote again. Create a table in your db, and insert a row when the user votes.
Don't use onclick attribute. Use jQuery's .on/.bind/.click.
As tehy've already explained you, there cannot 2 or more elements on the page with the same id. You need to use classes.
As I've told you, don't use SET '.$type.' = '.$type.' + 1 unless you check what's $type's value. $_POST['type'] can be positive = 1; DROP TABLE tc_tuto_yt_voting_system;.
If registering is required for voting:
CREATE TABLE user_votes (
user_id INT(11) UNSIGNED NOT NULL,
image_id INT(11) UNSIGNED NOT NULL,
vote TINYINT(3) UNSIGNED NOT NULL
)
$user_votes = $db->prepare("SELECT image_id, vote FROM user_votes WHERE user_id = ?");
$user_votes->bindValue(1, $_SESSION["user_id"], PDO::PARAM_INT);
If not:
CREATE TABLE user_votes (
user_ip VARBINARY(16) UNSIGNED NOT NULL,
image_id INT(11) UNSIGNED NOT NULL,
vote TINYINT(3) NOT NULL
)
$user_votes = $db->prepare("SELECT image_id, vote FROM user_votes WHERE user_id = INET6_ATON(?)");
$user_votes->bindValue(1, $_SERVER["REMOTE_ADDR"], PDO::PARAM_STR);
Then display the images, and votes:
$user_votes->execute();
$u_votes = [];
while ($vote = $user_votes->fetch())
$u_votes[$vote->image_id] = $vote->vote;
$images = $db->prepare("SELECT * FROM images");
$images->execute();
while ($img = $images->fetch())
{
$is_voted = isset($u_votes[$img->id]);
$vote = $is_voted ? ($u_votes[$img->id] ? "down" : "up") : "";
echo '<img src="'.$img->filename.'" />
<div class="vote" data-image-id="'.$img->id.'">
<div class="vote_down'.($vote == "down" ? " voted" : "").'"></div>
<div class="number positive">'.$img->positive.'</div>
<div class="vote_up'.($vote == "up" ? " voted" : "").'"></div>
<div class="number negative">'.$img->negative.'</div>
</div>';
}
JS:
$(document).on("click", ".vote .vote_down, .vote .vote_up", function(e)
{
if ($(e.target).is(".voted"))
return;
var that = $(this),
div = that.parent(),
type = that.is(".vote_up") ? "positive" : "negative",
id = div.attr("data-image-id");
$.ajax({
type: "POST",
url: "ad_vot.php",
data: {
tpye: type,
image_id: id
}
timeout: 3000,
success: function(dataBack) {
that.addClass("voted");
var number = div.find("."+type);
number.html(parseInt(number.html())+(type == "positive" ? 1 : -1));
$('#message').html('<div id="alertFadeOut" style="color: green">Your vote is added!</div>');
$('#alertFadeOut').fadeOut(3000, function () {
$('#alertFadeOut').text('');
});
},
error: function() {
$('#message').text('Vote failed. Please try again.');
}
});
});
PHP process:
$check = $db->prepare("SELECT 1 FROM user_votes WHERE image_id = ? AND user_id = ?");
$check->bindValue(1, $_POST["image_id"], PDO::PARAM_INT);
$check->bindValue(2, $_SESSION["user_id"], PDO::PARAM_INT);
//or
$check = $db->prepare("SELECT 1 FROM user_votes WHERE image_id = ? AND user_ip = INET6_ATON(?)");
$check->bindValue(1, $_POST["image_id"], PDO::PARAM_INT);
$check->bindValue(2, $_SERVER["REMOTE_ADDR"], PDO::PARAM_STR);
$check->execute();
if ($check->rowCount())
die("Already voted.");
$vote = $_POST["type"] == "positive" ? 1 : 0;
$insert = $db->prepare("INSERT INTO user_votes VALUE(?, ?, ?)");
$insert->bindValue(1, $_SESSION["user_id"], PDO::PARAM_INT);
//or
$insert = $db->prepare("INSERT INTO user_votes VALUE(?, ?, INET6_ATON(?))");
$insert->bindValue(1, $_SERVER["REMOTE_ADDR"], PDO::PARAM_STR);
$insert->bindValue(2, $_POST["image_id"], PDO::PARAM_INT);
$insert->bindValue(3, $vote, PDO::PARAM_INT);
$insert->execute();
$row = $vote == 1 ? "positive" : "negative";
$update = $db->prepare("UPDATE images SET ".$row." = ".$row." + 1 WHERE id = ?");
$update->bindValue(1, $POST["image_id"], PDO::PARAM_INT);