How make Like button in django using ajax

Question

How I can connect like button in Django to ajax and when the button hit the number of likes +1 and if hit again the number of likes -1

This is my model for video model

class Video(models.Model):
    author = models.ForeignKey(Account, on_delete=models.CASCADE)
    video = models.FileField(upload_to='post-videos', validators=[validate_file_extension])
    title = models.CharField(max_length=100)
    description = models.TextField(null=True, blank=True)
    created_date = models.DateTimeField(auto_now_add=True)
    likes = models.ManyToManyField(Account, blank=True, related_name='likes', default=None)

my view

class AddLike(LoginRequiredMixin, View):
    def post(self, request, pk, *args, **kwargs):
        video = Video.objects.get(pk=pk)

        is_dislike = False


        for dislike in video.dislikes.all():
            if dislike == request.user:
                is_dislike = True
                break

        if is_dislike:
            video.dislikes.remove(request.user)

        is_like = False

        for like in video.likes.all():
            if like == request.user:
                is_like = True
                break

        if not is_like:
            video.likes.add(request.user)

        if is_like:
            video.likes.remove(request.user)

        next = request.POST.get('next', '/')
        return HttpResponseRedirect(next)

my template html

  <form method="POST" action="{% url 'video:like' video.pk %}" id="my-like-form">
     {% csrf_token %}
     <input type="hidden" class="likin" name="next" value="{{ request.path }}">
     <button class="remove-default-btn" type="submit" id="openPopup" class="remove-default-btn like-btn{{ request.path }}" style="border: none; ">
         <i class="fa fa-thumbs-up" aria-hidden="true"><span class="">{{ video.likes.all.count }}</span></i>
     </button>
 </form>

Answer 1

You can use JsonResponse (Django Docs) and create a simple view (Django Docs).

I am assuming that likes are many2many fields related to the User model.

Then you can use the following code:

views.py:

from django.http import JsonResponse

def add_remove_like(request, pk):
    data = {}
    video = Video.objects.get(pk=pk)

    if request.method == "POST":
        user = request.user
        if video.likes.filter(id=user.id).exists():
            liked = False
            video.likes.remove(user)
        else:
            video.likes.add(user)
            liked = True


    data["count"] = video.likes.count()
    data["liked"] = liked
    return JsonResponse(data) 

.html:

$("#my-like-form").submit(function(e){
    e.preventDefault(); 

    var form = $(this);
    let url = form.attr("action");

    $.ajax({
        type: "POST",
        url: url,
        data: form.serialize(),
        dataType: "json",
        success: function(response) {
            var btn = form.find("button[type='submit']");

            if (response.liked) {
                console.log('Hello');
                btn.css("color", "blue");
            } else {
                btn.css("color", "black");
            }
            btn.find("span").text(response.count)
        }
    })
})

urls.py:

from django.contrib.auth.decorators import login_required

path('account/video/<int:pk>/like', login_required(views.add_remove_like), name='add_remove_like'),

Note: I renamed the view to add_remove_like