I have a like system in my website. When I click on like, it like, when I reclick it unlike. I want that, when I like, my page don't reload, so I tried Ajax, it works but I have to reload the page to see changes. Can you help me? Thanks in advance.
Here is the code:
post.php?p=34
<div class="content">
<div class="posts">
<?php
while($question = $getQuestion->fetch()){
?>
<div class="card">
<div class="head">
<div class="title">
<?= $question['title']; ?>
</div>
<div class="date">
<?= ", ".$question['publication_date']; ?>
</div>
</div>
<div class="content-card">
<?= "<div class='readMore'>" . $question['content'] . "</div>"; ?>
</div>
<div class="footer">
<?php if($question['id_author'] == $_SESSION["id"]){ ?>
<div class="modifyBtn">
<button onclick="window.location.href='editpost.php?id=<?= $question['id']; ?>'">Modify the post</button>
</div>
<div class="deleteBtn">
<button onclick="window.location.href='actions/posts/deleteQuestion.php?id=<?= $question['id']; ?>'"><i class="fa-solid fa-trash-can"></i></button>
</div>
<div class="statsBtn">
<button onclick="window.location.href='actions/posts/?id=<?= $question['id']; ?>'">Stats <i class="fa-solid fa-square-poll-vertical"></i></button>
</div>
<?php } ?>
</div>
<section class="answers">
<div class="comments">
<form class="form-content" method="POST" id="postComment"> <!-- action="actions/posts/postAnswer.php" -->
<input name="answer" class="answer-btn" type="text" placeholder="Comment" autocomplete="off"><button type="submit" class="submit-btn" name="validate"><i class='fa-solid fa-paper-plane'></i></button>
</form>
</div>
</section>
</div>
<div class="answers-container" id="answers-container">
<?php
while($answer = $getAnswers->fetch()){
$getAnswerRating = $bdd->prepare("SELECT * FROM answers_rating WHERE user_id = ? AND answer_id = ?");
$getAnswerRating->execute(array($_SESSION["id"], $answer["id"]));
$answer_id = $answer["id"];
?>
<div class="answer">
<div class="answer_header">
<?= "<div class='author'>".$answer["username_author"]."</div>"; ?>
<form method="POST" id="likeComment" class="formLikeComment">
<div class="likes" id="likes">
<button type="submit" class="addLikeSubmitBtn<?= $answer_id; ?>">
<?php
if($getAnswerRating->rowCount() > 0){
?>
<i class='fa-solid fa-heart' id='likeHeart'></i>
<?php
}else{
?>
<i class='fa-regular fa-heart' id='likeHearth'></i>
<?php
}
?>
<p><?= $answer["likes"]; ?></p>
</button>
</div>
</form>
</div>
<div class="answer_body">
<?= "<div class='answer_content'>".$answer["content"]."</div>"; ?>
</div>
</div>
<script>
$(".formLikeComment").submit(function (e){
e.preventDefault();
$.get("actions/posts/answerLikes.php", { id : "<?= $answer_id; ?>" });
})
</script>
<?php
}
?>
</div>
<?php
}
?>
</div>
</div>
<script src="assets/js/scroll.js"></script>
<script src="assets/js/maxstr.js"></script>
<script>
$(function(){
$(".form-content").submit(function (e){
var answer_content = document.getElementById("answers-container");
var answer = $(".answer-btn").val();
var dataString = "answer=" + answer +"&post_id=" + <?= $_GET['p']; ?>
$.ajax({
type: "POST",
url: "actions/posts/postAnswer.php",
data: dataString,
cache: false,
success: function(result){
console.log(result);
}
});
//$(".addLikeSubmitBtn").innerHTML = "<i class='fa-solid fa-heart'></i>";
});
</script>
actions/posts/answerLikes.php
<?php
session_start();
require("../config.php");
if($_SERVER['REQUEST_METHOD'] != 'POST'){
http_response_code(403);
die();
}else{
if(isset($_GET["id"]) AND !empty($_GET["id"])){
$idAnswer = (int)$_GET["id"];
$idUser = (int)$_SESSION["id"];
$check = $bdd->prepare("SELECT * FROM answers WHERE id = ?");
$check->execute(array($idAnswer));
$Check = $check->fetch();
if($check->rowCount() > 0){
$ifAlreadyRated = $bdd->prepare("SELECT id FROM answers_rating WHERE user_id = ? AND answer_id = ?");
$ifAlreadyRated->execute(array($_SESSION["id"], $_GET["id"]));
if($ifAlreadyRated->rowCount() > 0){
$deleteLike = $bdd->prepare("UPDATE answers SET likes = likes - ? WHERE id = ?");
$deleteLike->execute(array("1", $_GET["id"]));
$deleteRating = $bdd->prepare("DELETE FROM answers_rating WHERE user_id = ? AND answer_id = ?");
$deleteRating->execute(array($_SESSION["id"], $_GET["id"]));
header("Location: ".$_SERVER["HTTP_REFERER"]."");
}else{
$insertLike = $bdd->prepare("UPDATE answers SET likes = likes + ? WHERE id = ?");
$insertLike->execute(array("1", $_GET["id"]));
$insertRating = $bdd->prepare("INSERT INTO answers_rating(username, user_id, answer_id) VALUES(?, ?, ?)");
$insertRating->execute(array($_SESSION["username"], $_SESSION["id"], $_GET["id"]));
header("Location: ".$_SERVER["HTTP_REFERER"]."");
}
}else{
echo "error: " . $check->error;
}
}else{
exit("Erreur fatale");
}
}