Create Real-time like button using Django and Ajax, on List View.

Micheal Ukeje
3 min readFeb 22, 2021

In this article, you will learn how to create a like button in the Django list view, where users can like or up vote without first going to the detail-view.

The Brief:

Make sure you have the Django project and app already set up, and also you have a jQuery file attached to your document.

You can easily follow the steps, copy and paste the code, or download the project from my GitHub repo here.

STEP 1 — Create Your Data Model:

Create a class model if you haven’t already. Your model should have a like field and class property which returns total likes. Reference to the image below

STEP 2 — Adding a like button in TEMPLATES:

a Like button in the template

I am utilizing bootstrap classes and wrapping the button in a div to give it more independence and flexibility. I am also using Icofont font package but you can use any font package of your choice.

Key attributes you should have on your like button are:

ID, data- url, and the class.

Note: that the class is called likebtn which we will be using in the jQuery Ajax call, and the post id which is unique for all posts is set as the button id.

in the next step, we will be setting up the URL.

STEP 3 — Add a URL:

Add a URL for the like button which will be referenced in the ajax call

like button URL

STEP 4 — jQuery Ajax Call in the base.html:

In this step, we have to follow the steps carefully.

When a user clicks on the like button with class likebtn, an action is triggered which will get the unique id (post id) of that particular button to be used for the ajax call.

Ajax call contains the type, URL, data

  • Type: Which tells the server it is a POST call
  • URL: which will handle the route,
  • data: which contains the post_id, csrfmiddlewaretoken to prevent cross-site request forgery and other security loopholes, and the action.

We have the success and error call back functions to which we will be coming back.

STEP 5 — The View:

At the top, make sure to import login_required, JsonResponse, and HttpResponse, get_object_or_404

For a user to like a post a user needs to be logged in, we are using the login decorator to ensure this.

  • First, we are checking if the request action equals to post.
  • Set the flag to none and then get the post id from the ajax call.
  • We will use the post id to get this particular post from the data model.

Now we will check if the user already liked the post using the if condition statement, if the user already liked the post then remove the user and set the flag to false.

Else we can add the user amongst the liked users and set the flag to true.

We will then return the flag and total likes which we use in the success callback method in the AJAX call.

Finale Note: To test the like functionality you have to be logged in as a superuser or by creating new users.

--

--

Micheal Ukeje

I write about problems I encountered while coding and how I solved them. I am a prolific and self-disciplined Software Engineer.