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 если сообщение не понравилось.

Вернуться на верх