Ajax-интеграция с Django и смена иконок Font Awesome
У меня есть приложение Django, где я хочу отобразить страницу, содержащую посты пользователей, которые могут быть понравились другим пользователям, нажав на Font Awesome Icon, который далее находится в теге якоря. Когда пост нравится пользователю, класс иконки должен быть изменен с fa-heart
на fa-heart-o
и наоборот. Для этого по событию click на иконке выполняется Ajax-запрос. Это изменяет иконку и увеличивает/уменьшает количество лайков.
У меня это как у FBV:
#feeds/views.py
@login_required
def like(request):
post_id = request.GET.get("post_id", "")
user = request.user
post = Post.objects.get(pk=post_id)
liked= False
like = Like.objects.filter(user=user, post=post)
if like:
like.delete()
else:
liked = True
Like.objects.create(user=user, post=post)
resp = {
'liked':liked
}
response = json.dumps(resp)
return HttpResponse(response, content_type = "application/json")
И в urls.py
:
urlpatterns=[
path('like/', views.like, name='like'),
]
Это шаблон
{% for post in posts %}
......
</li>
<li>
{% if post in liked_post %}
<span class="like" data-toggle="tooltip" title="Unlike">
<a id="like" post_id="{{ post.id }}"><i class="fa fa-heart"></i></a>
<ins>{{ post.likes.count }}</ins>
</span>
</a>
{% else %}
<span class="like" data-toggle="tooltip" title="Like">
<a id="like" post_id="{{ post.id }}"><i class="fa fa-heart-o"></i></a>
<ins>{{ post.likes.count }}</ins>
</span>
</a>
{% endif %}
</li>
...
{% endfor %}
Это вызов Ajax.
$('#like').click(function (e) {
console.log('requested !')
var _this = $(this);
e.preventDefault();
$.ajax({
type: "GET",
url: "{% url 'like' %}",
data:{
post_id: _this.attr('post_id')
}
success: function (res) {
if (res.liked){
icon = _this.find("i");
icon.toggleClass("fa-heart fa-heart-o");
console.log('liked');
}
else{
icon = _this.find("i");
icon.toggleClass("fa-heart-o fa-heart");
console.log('unliked');
}
}
});
});
Теперь проблема: каждый раз, когда я нажимаю на значок сердца, страница перенаправляется на /like
(что, как я предполагаю, не должно происходить, поскольку есть использование preventDefault();
) и я не могу поставить лайк.
Как я могу решить эту проблему? Я пробовал разные решения, например, такие:
Как изменить иконку с помощью ajax вызова
Изменение текста анкора и иконки с помощью jquery
Как изменить класс элемента с помощью JavaScript?
Изменение цвета иконки в jquery (проект django)
Но ничего из этого не сработало для меня. Поэтому вопрос в том, как я могу это реализовать? Также, как я могу изменить количество лайков после успешного ajax вызова?
Попробуйте
success: function (res) {
if (res.liked){
icon = _this.find("i");
icon.removeClass();
icon.addClass("fa-heart-o");
console.log('liked');
}
else{
icon = _this.find("i");
icon.removeClass();
icon.addClass("fa-heart");
console.log('unliked');
}
Это покажет fa-heart-o
если пользователю понравилось сообщение и fa-heart
если сообщение не понравилось.