CODEWITHSUNDEEP
jquerydjangoajaxdjango-views
Godda
Godda

Reputation: 1001

Like button only work when clicked on but cant unlike post object using ajax in Django

I'm trying to work Django with ajax to stop the reload of page when a post object is liked by a user, but somehow when the like button is clicked it update the button as liked, but when i click the button to unlike the post doesn't unlike. I'm wondering how i could do it better to stop this malfunction. why does it only toggle to like but doesn't back to unlike ?

My likeview 

def Addlike(request,post_id):
    if request.method == 'POST':
        post = Post.objects.get(id=post_id)
        is_liked = False
        if post.like_page_post.filter(id=request.user.id).exists:
            post.like_page_post.remove(request.user)
            is_liked = False
        else:
            post.like_page_post.add(request.user)
            is_liked = True
        return JsonResponse({'is_liked':is_liked,'count_likes':post.like_page_post.all().count()})

Ajax function

function likeajax($this) {
    var id = $this.attr("id");
    var count_likes = $('#count_likes');
    var like_icon = $('#like_icon');

    $.ajax({
        headers: {'X-CSRFToken': document.getElementById('csrf').querySelector('input').value},
        method: 'POST',
        url: "{% url 'page:like' page.id %}",
        dataType: "json",
        data: {
          
        },
        success: function (data) {
               if(data.is_liked)
                 {
             
                    like_icon.html('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="blue" width="22" height="22" class="dark:text-gray-100" ><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" /></svg>');
                    count_likes.text(data.likes_count);
                }
                else
                {
                   like_icon.html('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="red" width="22" height="22" class="dark:text-gray-100" ><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" /></svg>');
                   count_likes.text(data.likes_count);   
                }
        }
    });
}
</script>

Like button HTML

 {% if is_liked %}
<a onclick="likeajax($(this)); return false;" id="{{ post.id }}" class="flex items-center space-x-2">
<div class="p-2 rounded-full  text-black lg:bg-gray-100 dark:bg-gray-600" id="like_icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="blue" width="22" height="22" class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
  </svg></div>
 <div> Unlike</div>
  </a>
 {% else %}
<a onclick="likeajax($(this)); return false;" id="{{ post.pk }}"  class="flex items-center space-x-2">
<div class="p-2 rounded-full  text-black lg:bg-gray-100 dark:bg-gray-600" id="like_icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="red" width="22" height="22"class="dark:text-gray-100">
<path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
</svg></div>
   <div>Like</div></a>
{% endif %}

Upvotes: 1

Views: 94

Answers (1)

willeM_ Van Onsem
willeM_ Van Onsem

Reputation: 476709

You need to call the .exists() method, so:

if post.like_page_post.filter(id=request.user.id).exists():
    # …

Upvotes: 1

Related Questions