My Django-ajax Like Button is not working..? - html

Question

I had tried several times to fix this but not successfull, likes count are all updating when I use the admin panel but not in html template..
views.py
from common.decorators import ajax_required
#ajax_required
#login_required
#require_POST
def like_post(request):
# image_id = get_object_or_404(Post, id=request.POST.get('id'))
image_id = request.POST.get('id')
action = request.POST.get('action')
if image_id and action:
try:
image = Post.objects.get(id=post_id)
if action == 'like':
image.likes.add(request.user)
else:
image.likes.remove(request.user)
return JsonResponse({'status':'ok'})
except:
pass
return JsonResponse({'status':'error'})
post_view.html
{% extends 'base.html' %}
{% load static %}
{% block title %}Users Posts{% endblock %}
{% block content %}
<div class="container-fluid">
<form method="post" enctype="multipart/form-data">
{{ form.as_p }}
{% csrf_token %}
<input type="submit" value="Post">
</form>
</div>
{% for post in posts %}
<div class="w3-container w3-card w3-white w3-round w3-margin"><br>
<img src="{% if post.user.profile.photo %} {{post.user.profile.photo.url}}
{% else %}{% static 'img/user.png' %}{% endif %}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
<span class="w3-right w3-opacity">{{ post.created }}</span>
<h4>{{ post.user|title }}</h4><br>
<hr class="w3-clear">
<p>{{ post.title }}</p>
{% if post.image %}
<div style="max-width:100%;height:auto;object-fit: cover;" class="img-fluid">
<img src="{{ post.image.url }}" class="img-fluid" style="max-width:100%;height:auto;object-fit: cover;">
</div>
<p>{{ post.description }}</p>
{% endif %}
{% with total_likes=post.likes.count users_like=post.likes.all %}
<div class="image-info">
<div>
<span class="count">
<span class="total">{{ total_likes }}</span>
like{{ total_likes|pluralize }}
</span>
<a href="#" data-id="{{ post.id }}" data-action="{% if request.user in users_like %}un{% endif %}like" class="like button mb-3">
{% if request.user not in users_like %}
Like
{% else %}
Unlike
{% endif %}
</a>
</div>
</div>
{% endwith %}
</div>
{% endfor %}
{% include 'post/pagination.html' with page=posts %}
{% endblock %}
{% block domready %}
$('a.like').click(function(e){
e.preventDefault();
$.post('{% url "post:like" %}',
{
id: $(this).data('id'),
action: $(this).data('action')
},
function(data){
if (data['status'] == 'ok')
{
var previous_action = $('a.like').data('action');
// toggle data-action
$('a.like').data('action', previous_action == 'like' ?
'unlike' : 'like');
// toggle link text
$('a.like').text(previous_action == 'like' ? 'Unlike' :
'Like');
// update total likes
var previous_likes = parseInt($('span.count .total').text());
$('span.count .total').text(previous_action == 'like' ?
previous_likes + 1 : previous_likes - 1);
}
}
);
});
{% endblock %}
base.html
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/js.cookie.min.js' %}"></script>
<script>
var csrftoken = Cookies.get('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$(document).ready(function(){
{% block domready %}
{% endblock %}
});
</script>
urls.py
from django.urls import path
from post import views
from django.conf import settings
from django.conf.urls.static import static
app_name = 'post'
urlpatterns = [
path('',views.post_list,name='post_list_view'),
path('like/',views.like_post,name='like'),
]
This the entire code when I tried to modify the ajax function the like button changes and then it will change all other likes present in the post_view.html, where it contains the all other posts in the same page..