Having trouble creating a like button with an AJAX function in Django. Every time I click on the button, it redirects me to a different page showing a JSON object that returns {liked: true}. Why is this happening? It's been quite challenging for me to diagnose the problem - could it be an issue with my JavaScript or the function in views.py? How can I prevent the page from reloading when users click on the like button? Here's the code snippet for my like function:
def like(request, pk, c_slug=None):
user = request.user
if request.POST.get("operation") == "like_submit" and is_ajax(request=request):
liked=get_object_or_404(Like,pk=pk)
product = Product.objects.get(pk=pk, slug=c_slug)
liked= False
like = Like.objects.filter(user_like=user, product=product)
if like:
like.delete()
else:
liked = True
Like.objects.create(user_like=user, product=product)
resp = {
'liked':liked,
}
response = json.dumps(resp)
return HttpResponse(response,content_type = "application/json")
model.py
class Like(models.Model):
user_like = models.ForeignKey(settings.AUTH_USER_MODEL, related_name='user_likes', on_delete=models.CASCADE)
product = models.ForeignKey(Product, related_name='user_likes', on_delete=models.CASCADE)
like_date = models.DateTimeField(auto_now=True)
This is my script for the AJAX call
<script>
$(".like").click(function (e) {
var id = this.id;
var href = $('.like').find('a').attr('href');
e.preventDefault();
$.ajax({
url: href,
data:
{'liked': $(this).attr('name'),
'operation':'like_submit',
'csrfmiddlewaretoken': '{{ csrf_token }}'},
success: function(response){
if(response.liked){
$('#likebtn' + id).html("Unlike");
$('#likebtn' + id).css("color", "gray")
}
else{
$('#likebtn' + id).html("Like");
$('#likebtn' + id).css("color", "blue")
}
}
})
});
</script>
my HTML
{% if product in liked %}
<a href='{% url "shop:like" product.id product.slug %}' id="likebtn{{ product.id }}" class="flexitems-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-10">
<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 href='{% url "shop:like" product.id product.slug %}' id="likebtn{{ product.id }}" class="flex items-center space-x-2">
<div class="p-2 rounded-full text-black lg:bg-gray-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" 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 %}