ajax like button django

Question

my ajax jquery :

 $(".likebutton").on('click', function () {
  post_id=$(this).attr('name');
  console.log('CLICKED IN LIKE');
    $.ajax({

    dataType: 'json',

    url: post_id +'/like/',
    data: {


  },
  success: function (data) {
       alert("SUCESSS");
      if (data.success) {
       console.log("SUCCESS")
        $(this).parents('.timeline-footer').html(''+data.likecount+ 'Likes '+
                 ' 
 '+
                    'Like'+
                ' 
    '+
                    'Comment')

        // here you update the HTML to change the active to innactive
      }else{
      console.log("ERROR");
        alert("ajax call not success.");
      }
 }
});
 });

my like template like_comment2.html:

 {{ obj.like.count }} Likes 


{% csrf_token %}

My view:

def LikeToggleView(request,pk=None):
print("NOT AJAX")
if request.is_ajax():
    post_id = request.POST.get('post_id')
    response_data = {}
    obj = get_object_or_404(Task, pk=post_id)

    user = request.user

    print("AJAX LIKE")

    if user in obj.like.all():
             obj.like.remove(user)
             note = Notification.objects.create(sender=user, task=obj, 
 notification = user.username + ' Disliked Your Post ' + obj.title)
             note.receiver.add(obj.student)
    else:
             obj.like.add(user)
             note = Notification.objects.create(sender=user, task=obj, 
  notification = user.username + '  Liked Your Post ' + obj.title)
             note.receiver.add(obj.student)



    response_data['likecount'] = obj.like.count

    return JsonResponse(response_data)

I want to update the number of likes in the template using ajax.Seems like its not getting into the ajax call :It printing "Not AJax" in the terminal

my urls.py

url(r'^dashboard/tasks/(?P\d+)/like/$', views.LikeToggleView, 
name='like'),

The console is showing errors: GET http://localhost:8000/student/dashboard/tasks/154/like/ 404 (Not Found) http://localhost:8000/student/dashboard/tasks/154/like/ 404 (Not Found)

14:21:37.896 :8000/student/dashboard/tasks/154/like/:1 POST http://localhost:8000/student/dashboard/tasks/154/like/ 500 (Internal Server Error) Also its firing the jquery onclick two times when i click on like button

urls.py:

from django.conf.urls import url
from . import views

app_name = 'student'

urlpatterns=[
url(r'^dashboard/tasks/$',views.StudentDashView,name='dashboard'),
url(r'^dashboard/tasks/ajax/reload/$', views.ajax_change_status, 
name='ajax_change_status'),

url(r'^dashboard/tasks/(?P\d+)/$', views.TaskDetailView, 
name='task-detail'),
url(r'^dashboard/tasks/(?P\d+)/like/$', views.LikeToggleView, 
name='like'),
url(r'^add-mentor/$',views.AddMentor,name='add_mentor'),
url(r'^trainer-profile/(?P\d+)/$', 
views.TrainerPublicProfile, name='trainer_public_profile'),
url(r'^add-as-mentor/(?P\d+)/$', views.AddAsMentor, 
name='add_as_mentor'),
url(r'change-as-mentor/(?P\d+)/$', views.ChangeAsMentor, 
name='change_as_mentor'),
url(r'^accept-to-hub/(?P\d+)/(?P\d+)/$', views.AcceptHub, 
name='accept_hub'),
url(r'^reject-to-hub/(?P\d+)/(?P\d+)/$', views.RejectHub, 
name='reject_hub'),
url(r'^accept-mentor/(?P\d+)/$', views.AcceptMentor, 
name='accept_as_mentor'),
url(r'^reject-mentor/(?P\d+)/$', views.RejectMentor, 
name='reject_as_mentor'),
url(r'^promote-to-excom/(?P\d+)/$', views.PromoteExcom, 
name='promote'),
url(r'^depromote-to-excom/(?P\d+)/$', views.DePromoteExcom, 
name='depromote'),
url(r'^remove-from-hub/(?P\d+)/$', views.RemoveFromHub, 
name='remove_from_hub'),

url(r'^view-hubs/$', views.HubListView, name='view_all_hubs'),
url(r'^join-hub/(?P\d+)/$', views.JoinHub, name='join_hub'),

# url(r'^dashboard/tasks/(?P\d+)/like/$', views.Tasklike, 
name='task-like'),
url(r'^level/$', views.StudentLevelListView, name='level'),
url(r'^level/(?P\d+)/$', views.StudentLevelDetailView, 
name='level-detail'),
url(r'^level/(?P\d+)/(?P\d+)/$', views.TaskCreateView, 
name='task-form'),
url(r'^hub/$', views.StudentHubListView, name='hub'),
url(r'^subscribe/member/$',views.MemberPay,name='member'),
url(r'^subscribe/fellow/$', views.FellowPay, name='fellow'),
url(r'^payment-member/success$', views.payment_success_member,  
name="payment_success_member"),
url(r'^payment-member/failure$', views.payment_failure_member, 
name="payment_failure_member"),
url(r'^payment-fellow/success$', views.payment_success_fellow, 
name="payment_success_fellow"),
url(r'^payment-fellow/failure$', views.payment_failure_fellow, 
name="payment_failure_fellow"),

]

js:

 $(".likebutton").on('click', function (event) {
 event.preventDefault();
 post_id=$(this).attr('value');
  console.log('CLICKED IN LIKE');
    $.ajax({
type:'post',
    url: post_id+'/like/',
    data: {
  csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()

    },

 success: function (data) {
       alert("SUCESSS");
      if (data.success) {
       console.log("SUCCESS")
        $(this).parents('.timeline-footer').html(''+data.likecount+ 'Likes '+
                 ' 
 '+
                    'Like'+
                ' 
'+
                    'Comment')

        // here you update the HTML to change the active to innactive
      }else{
      console.log("ERROR");
        alert("ajax call not success.");
      }
},
     crossDomain: false


});
 });



 $(".likebuttons").on('click', function (event) {
  event.preventDefault();
 post_id=$(this).attr('value');
 console.log('CLICKED IN LIKE');
    $.ajax({
     headers: {'X-Requested-With': 'XMLHttpRequest'},
 type:'post',
    url: 'like/',
    data: {
  csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()

    },

 success: function (data) {
       alert("SUCESSS");
      if (data.success) {
       console.log("SUCCESS")
        $(this).parents('.timeline-footer').html(''+data.likecount+ 'Likes '+
                 ' 
'+
                    'Like'+
                ' 
'+
                    'Comment')

        // here you update the HTML to change the active to innactive
      }else{
      console.log("ERROR");
        alert("ajax call not success.");
      }
},

    crossDomain: false


 });
});

I have included like section from here:

 

   {% include 'like_comment2.html' %}
    
        Comment

Mohit Harshan · Accepted Answer

This is the final working code:

Javascript:

$(document).on('click','.likebutton',function(event)  {
event.preventDefault();
post_id=$(this).attr('value');
console.log('CLICKED IN LIKE');
    $.ajax({
    url: post_id+'/like/',
 type:'post',

    data: {
  csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()

 },

  success: function (data) {

       console.log("SUCCESS")
       console.log(data);
        console.log($(this).closest("div").prop("class"));
        $(this).closest('div').html(data)

        // here you update the HTML to change the active to innactive

  }.bind(this),
 error: function(xhr, status, error) {
 var err = JSON.parse(xhr.responseText);
 alert(err.Message);
}

 });
 });

My function:

 def LikeToggleView(request,pk=None):


    obj = get_object_or_404(Task, pk=pk)

    user = request.user


    if user in obj.like.all():
             obj.like.remove(user)
             note = Notification.objects.create(sender=user, task=obj, 
  notification = user.username + ' Disliked Your Post ' + obj.title)
             note.receiver.add(obj.student)
    else:
             obj.like.add(user)
             note = Notification.objects.create(sender=user, task=obj, 
  notification = user.username + '  Liked Your Post ' + obj.title)
             note.receiver.add(obj.student)


    if request.is_ajax():
     print("AJAX LIKE")
     context={
        'obj':obj,

     }
     html = render_to_string('like_comment.html', context, request=request)
     return HttpResponse(html)

like_comment.html:

 {% load static %}

  {{ obj.like.count }} Likes 

 
 {% csrf_token %}
 Like



 
                    Comment

ajax like button django

Answers (2)

Related Questions