likes counter with AJAX (and Symfony) - php

Question

I've got likes system on my website (one like button that becomes empty or filled when clicking) and it works perfectly fine in terms of server side. My issue is the likes counter. I want it to refresh likes count without page reload and cannot really figure out how. I'm kinda newbie with AJAX and that's why I'm here.
Here is my code:
CommentLikeController.php
/**
* #Route("/comments/like-unlike", name="app_comment_like_unlike")
*/
public function like(Request $request, EntityManagerInterface $entityManager): Response
{
if ($request->getMethod() === 'POST'){
//retrieve commentId from AJAX request
$commentId = $request->request->get('entityId');
//check if comment exists
$comment = $entityManager->getRepository(Comment::class)->findOneBy(['id'=> $commentId]);
// return void if not
if (!$comment){
return new JsonResponse();
}
// retrieve csrf Token from AJAX request
$submittedToken = $request->request->get('csrfToken');
// check if it's valid
if ($this->isCsrfTokenValid('comment' . $comment->getId(), $submittedToken)){
$user = $this->getUser();
$commentAlreadyLiked = $entityManager->getRepository(CommentLike::class)
->findOneBy(['user' => $user, 'comment' => $comment]);
// if user unlikes the comment, remove it from DB
if($commentAlreadyLiked){
$entityManager->remove($commentAlreadyLiked);
$entityManager->flush();
return new JsonResponse();
// if user likes the comment, add record to DB
} else{
$like = new CommentLike();
$like->setUser($user);
$like->setComment($comment);
$entityManager->persist($like);
$entityManager->flush();
}
}
}
return new JsonResponse();
}
index.html.twig
<div class="js-likes-unlikes">
<a href="{{ path('app_comment_like_unlike') }}"
id="comment-like"
data-entity-id="{{ comment.id }}"
data-csrf-token="{{ csrf_token('comment' ~ comment.id) }}"
data-liked="{{ comment.commentLikes.isEmpty == true ? '0' : '1' }}"
data-likes-counter="{{ comment.commentLikes.count }}"
class="btn-like">
<i class="♡ {{ comment.commentLikes.isEmpty == true ? '' : 'liked' }}">
{{ comment.commentLikes.isEmpty == true ? '♡' : '♥' }}
</i>
</a>
<span class="counter">{{ comment.commentLikes.count }}</span>
</div>
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/comments_like_unlike.js') }}"></script>
{% endblock %}
comments_like_unlike.js
$(document).on('click', '#comment-like', function (e) {
e.preventDefault();
var url = $(this).attr('href');
var entityId = $(this).attr('data-entity-id');
var csrfToken = $(this).attr('data-csrf-token');
var isLiked = $(this).attr('data-liked');
var likesCounter = $(this).attr('data-likes-counter');
if (isLiked === '0') {
$(this).attr('data-liked', 1);
$('.♡').addClass('liked').text('♥')
likesCounter++;
} else {
$(this).attr('data-liked', 0);
$('.♡').removeClass('liked').text('♡')
likesCounter--;
}
$.ajax({
type: 'POST',
dataType: 'json',
data: {'entityId': entityId, 'csrfToken': csrfToken, 'likesCounter': likesCounter},
url: url,
success: function () {
console.log("success");
},
error: function () {
}
});
});
Your help and any explanations are greatly appreciated!
I tried checking and using others' examples of this part on the web but it didn't work out

Answer 1

Here you can do return number likes from server:
else{
$like = new CommentLike();
$like->setUser($user);
$like->setComment($comment);
$entityManager->persist($like);
$entityManager->flush();
return new JsonResponse(
'countLikes' => $like->getComment()->getCommentLikes()->count()
)
}
In twig add id to this span
<span class="counter" id="count-likes-{{ comment.id }}">{{ comment.commentLikes.count }}</span>
Ajax
success: function (response) {
// countLikes is returned in json response from the server
$('#count-likes-' + entityId).text(response['countLikes']);
},
or you can do it directly in the success function without any change in the controller and without return the numbers of likes from the server
success: function (response) {
$('#count-likes-' + entityId).text(parseInt(likesCounter) + 1);
},