Значок переключения fa fa не изменяется, когда он нравится
Я создаю небольшое приложение для социальных сетей. Я сделал кнопку "нравится-не нравится" в django (JsonResponse
). Я пытаюсь залить цветом иконку при нажатии (нравится), НО она не меняется, когда нравится.
views.py
def post_like_dislike(request, user_id):
post = get_object_or_404(Post, pk=user_id)
# Like
if request.GET.get('submit') == 'like':
if request.user in post.dislikes.all():
post.dislikes.remove(request.user)
post.likes.add(request.user)
return JsonResponse({'action': 'undislike_and_like'})
elif request.user in post.likes.all():
post.likes.remove(request.user)
return JsonResponse({'action': 'unlike'})
else:
post.likes.add(request.user)
return JsonResponse({'action': 'like_only'})
# Dislike
elif request.GET.get('submit') == 'dislike':
if request.user in post.likes.all():
post.likes.remove(request.user)
post.dislikes.add(request.user)
return JsonResponse({'action': 'unlike_and_dislike'})
elif request.user in post.dislikes.all():
post.dislikes.remove(request.user)
return JsonResponse({'action': 'undislike'})
else:
post.dislikes.add(request.user)
return JsonResponse({'action': 'dislike_only'})
else:
messages.error(request, 'Something went wrong')
return redirect('mains:all_stories')
template.html
<form method="GET" class="likeForm d-inline" action="{% url 'post_like_dislike' post.id %}"
data-pk="{{ post.id }}">
<span id="id_likes{{post.id}}">
{% if user in post.likes.all %}
<p style="color:#065FD4;display: inline">{{post.likes.count}}</p>
{% else %}
<p style="color:black;display: inline">{{post.likes.count}}</p>
{% endif %}
</span>
<button class='likeForm' value="like" type="submit"><i class="btn fal fa-sort-up fa-6x fa-lg post-buttons "></i></button>
</form>
<script>
document.addEventListener('DOMContentLoaded', function () {
window.addEventListener('load', function () {
// Like
$('.likeForm').submit(function (e) {
e.preventDefault();
let thisElement = $(this)
$.ajax({
url: thisElement.attr('action'),
data: {
'submit': 'like',
},
dataType: 'json',
method: 'get',
async: false, // Have a look into this
success: function (response) {
let likes = $(`#id_likes${thisElement.attr('data-pk')}`).find('p').html()
let dislikes = $(`#id_dislikes${thisElement.attr('data-pk')}`).find('p').html()
if (response.action == 'undislike_and_like') {
dislikes -= 1
likes++
$(`#id_dislikes${thisElement.attr('data-pk')}`)
$(`#id_likes${thisElement.attr('data-pk')}`).toggleClass("fal fas");
// Followed
$(`#followed_dislikes${thisElement.attr('data-pk')}`)
$(`#followed_likes${thisElement.attr('data-pk')}`).toggleClass("fal fas");
} else if (response.action == 'unlike') {
likes -= 1
$(`#id_likes${thisElement.attr('data-pk')}`).toggleClass("fal fas");
// Followed
$(`#followed_likes${thisElement.attr('data-pk')}`)
} else { //Like only
likes++
$(`#id_likes${thisElement.attr('data-pk')}`).toggleClass("fal fas");
// Followed
$(`#followed_likes${thisElement.attr('data-pk')}`)
}
}
})
})
</script>
Я пробовал так много раз, но все еще не работает.
Я буду очень признателен за вашу помощь.