Django Likes // Learn to create an Ajax-powered Like Button

Django Likes // Learn to create an Ajax-powered Like Button
Like Objects with Ajax and Django Rest Framework

# Django Likes
Learn how to create an ajax-powered `like` button in Django using `jQuery`.

What Technology you'll learn in the Build a Try Django 1.10 URL Shortening series:
-- Bootstrap (version 3.3): a powerful front-end framework used by thousands of sites around the world. Bootstrap makes it easier to have a responsive web application so it looks awesome on any mobile device and any desktop computer.

All of our tutorials have a simple goal in mind: get you building something real and quickly.

My equipment:

[selsil]

You are such an amazing! I love this tutorial and added to my site (add to wishlist button, follow/unfollow button, add to cart button). Thank you so much!!
Trick: When page refreshed, we should check if user likes the post. If did we can update text with "Liked". I added check-liked attribute and I put this info to my data (post view), When page refreshed I check that and update text.

[thiyagarajan]

to update accurate value in the end
send likescount as a response data from the api class:
updated = True
counts=obj.likes.count()
data = {
"updated": updated,
"liked": liked,
"likescount": counts
}
//and then use the response data directly to update in ajax call:
if (data.liked){
updateText(this_, data.likescount, "Unlike")
} else {
updateText(this_, data.likescount, "Like")
}

[thiyagarajan]

For showing like/unlike, we can do something simple like in post_detail inside like/unlike anchor tag
{% if user in post.likes.all %}
unlike
{% else %}
like
{% endif %}

[randomlyminuteman]

for remove bug, need add this code:
btn.attr("data-likes", newCount)

in function: updateText

[tomhunja]

Wow. Amazing... with a few conditionals on the django template and updating the attribute data-likes in the if statement, this worked seamlessly. I will definitely be back for more from this channel. Thanks.

[AdrianGonzalezBlogs]

Is 'GET' the correct method for updating the likes? Shouldn't a PUT or POST be more suitable? Anyway, thanks for the tutorial it was very helpful!

[PlayStayBay]

Great tutorial, I learned a lot and have been able to build off this quite well.

Question : is there any reason to leave in the non-AJAX version of the code? I could see leaving it so that users who don't have JavaScript enabled can still like and unlike things, but you don't address it, so it's not clear if the duplication of functionality was more of a learning technique (which worked, FWIW) or if it was an actual suggestion of best practices to implement. I know this tutorial is three-and-a-half years old, but hopefully you'll see this question and answer. :)

[jimmycheong]

Really great video! Thank you. I did notice the code towards the end of the video didn't work for me (the ".like-btn" jquery) so I can changed to update the value of the "data-likes" attribute for each success callback.

Keep them coming!

[shalom.nyende]

Thanks a lot Justin for the tuts. I really appreciate!

[alan]

such an informative example to intergrate Rest with Django. Thanks so much.

[alekinyua]

Nice tutorial but how do i actually separate the success for unlike and like and use buttons like this on youtube please

[arsenalacid]

Hello why do u use many to many field and not separate like model with generic foreign key what is best thank you great video

[MichaelRoberts-ouxe]

Three things I would do differently:

Don't worry about a redirect url, i.e., leave href=""

I would change the get nest to the following:

if
profile = user.userprofile
if profile in obj.likes.all():
liked = False
obj.likes.remove(profile)
count = obj.likes.all().count()
else:
liked = True
obj.likes.add(profile)
count = obj.likes.all().count()
updated = True

data = { 'updated': updated, 'liked': liked, 'count': count }
return Response(data)

And update the script tags to the following:

<script>
//
// API Like Button Toggle
//
$(document).ready(function() {
function updateText(newCount){
+ " likes");
}


e.preventDefault()
var this_ = $(this)
var likeUrl = this_.attr("data-href")
if (likeUrl){
$.ajax({
url: likeUrl,
method: "GET",
data: {},
success: function(data){
if (data.liked){
updateText(data.count)
} else {
updateText(data.count)
}
}, error: function(error){
console.log(error)
}
})
}
})
})
</script>

[luigic]

Hi, when I want to work with javascript on the client side, where I should put my file.js?

[shalom.nyende]

I have been thinking of a way to urlify (convert into a clickable link) a hashtag in a post. Could you do a video on that please? Or some advice on how to go about that? Thank you.

[pithikoulis]

Why is likes a ManyToManyField? Shouldn't it be an integer?

[lardosian]

Appreciate your videos but the very fast jumping around makes it hard to follow at times.

[philippkovac]

hey I would like to implement a dislike button as well. should I rewrite the code so it takes +1, 0-1 instead of true and false or implement a new API for disliking? I would like to do the first one because it seems easier since I have to affect the likeapi anyway. any suggestions?

[nsulanov]

Hi! I work with id not slug, but there is on id in my kwargs .... whyy?? please help

[brainmind]

Bro, you're going too fast, using JS syntax in Python and forgetting semicolons in JQuery! It would be easier to follow if you just slowed down a little, too! Regardless, though, thank you. Very informative video.