my like button is working fine without ajax with page reloading but it is having problem when done by implementing ajax. the like and unlike is happening in the backend (like is created and deleted in database on ajax Post request), but the like count,like,unlike button does not change in response on ajax post request, until the page is reloaded. Need Help
here is the post model and like model for posting image and liking it in models.py
class PostModel(models.Model):
user = models.ForeignKey(UserModel)
image = models.FileField(upload_to='user_images')
image_url = models.CharField(max_length=255)
caption = models.CharField(max_length=240)
created_on = models.DateTimeField(auto_now_add=True)
updated_on = models.DateTimeField(auto_now=True)
has_liked = False
@property
def like_count(self):
return len(LikeModel.objects.filter(post=self))
class LikeModel(models.Model):
user = models.ForeignKey(UserModel)
post = models.ForeignKey(PostModel)
created_on = models.DateTimeField(auto_now_add=True)
updated_on = models.DateTimeField(auto_now=True)
url for liking in urls.py
url(r'^like/', like_view),
views.py
def like_view(request):
user = check_validation(request)
if user and request.method == 'POST':
form = LikeForm(request.POST)
if form.is_valid():
#post_id = form.cleaned_data.get('post').id
post_id=request.POST['post']
existing_like = LikeModel.objects.filter(post_id=post_id, user=user).first()
if not existing_like:
LikeModel.objects.create(post_id=post_id, user=user)
else:
existing_like.delete()
return redirect('/feed/')
else:
return redirect('/login/')
template.html
{% for post in posts %}
<form id="like_form">
{% csrf_token %}
<input type="hidden" name="post" id="post_id"value="{{ post.id }}">
{% if post.has_liked %}
<button class="btn btn-link unlike"type="submit"><i class="fa fa-heart" aria-hidden="true"style="color:#ed4956;"></i></button>
{% else %}
<button class="btn btn-link like"type="submit"><i class="fa fa-heart-o" aria-hidden="true"style=color:#333333;"></i></button>
{% endif %}
</form>
{% endfor %}
Javascript code
<script>
$(document).on('submit','#like_form',function (e) {
e.preventDefault();
$.ajax({
type:'POST',
url:'/like/',
data:{
post:$('#post_id').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
},
success:function (response) {
console.log("liked");
}
});
});
</script>
