Django ajax 'like' button using Jquery?

Question

I want to implement a ajax 'like' button which should increase the like count and not refresh the whole page. I am new to ajax so please help.

urls.py:

(r'^like/(\d+)/$',like),

Below is my views code for like:

def like(request,feedno):
  feed=Feed.objects.get(pk=feedno)
  t=request.META['REMOTE_ADDR']
  feed.add_vote(t,+1)
  vote, created = Vote.objects.get_or_create(

          feed=feed,
          ip=t,
          )

  feed.likecount+=1
  feed.save()
  if 'HTTP_REFERER' in request.META:
    return HttpResponseRedirect(request.META['HTTP_REFERER'])
  return HttpResponseRedirect('/')

Below is my html(like div):

<div class="like_abuse_box">
  <p>Likes:<b>{{vote.feed_set.count}}</b> ||
   <a class="like" href="/like/{{feed.id}}/">Like</a> | 
   <a class="abuse" href="/abuse/{{feed.id}}/">Abuse</a> || </p>
</div>

What code should I include to only refresh that particular div and updated like count be shown without the whole page getting reloaded. Need Help. Thanks.

berni · Accepted Answer · 2011-05-27 22:09:00Z

3

~~Haven't tested it athough something like that should work.~~ Edit: tested and works, now for multiple elements on a webapage

Javascript

$("a.like").click(function(){
    var curr_elem = $(this) ;
    $.get($(this).attr('href'), function(data){
        var my_div = $(curr_elem).parent().find("b");
        my_div.text(my_div.text()*1+1);     
    }); 
    return false; // prevent loading URL from href
});

Django view

You can add if request is Ajax with:

if request.is_ajax():

edited May 27, 2011 at 22:09

answered May 27, 2011 at 20:51

berni

1,9751 gold badge19 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nazim Zeeshan Over a year ago

It seems to work. It does not refresh the whole page but it injects some nos like if vote is 0 and I click like it replaces 0 with '11364' into all like count places. so all feeds get this like value(11364) and only after refresh they go back to normal likecounts. why is it so? need help.

berni Over a year ago

Are you sure? I've edited it once as there was no *1 for converting text into int. It takes number from <b>{{vote.feed_set.count}}</b> and increments it by one after the ajax request is complete.

Nazim Zeeshan Over a year ago

actually i m having like_abuse_box inside feeds for loop. so there are many such boxes. So when i like all the other boxes votes change too. and they all change to some 6 digit no as indicated earlier. problem still persists. Any idea why is it so..? Thanks.

Sachin Over a year ago

@berni I tried using the javascript you have written but I am having a problem in the sense the javascript is not acting. When I click the button it is a simple operation and not the action taken by javascript. I have done exactly as written above. Could you help me out with this

arustgi · Accepted Answer · 2011-05-27 20:58:07Z

First thing: put an id on the html element where the content to be injected.

<div class="like_abuse_box">
  <p>Likes:<b id="like_count">{{vote.feed_set.count}}</b> ||
   <a class="like" href="/like/{{feed.id}}/">Like</a> | 
   <a class="abuse" href="/abuse/{{feed.id}}/">Abuse</a> || </p>
</div>

second, in your view you need to return the latest like count. You can't just locally update the count, since there is a chance that someone else may have updated the like count as well.

Lastly. in your page include the jquery

$("a.like").bind("click", function(){
    var link = $(this).attr("href");
    $.get(link, function(data) {
        $(this).parent("div").children('b#like_count').html(data);
    });
});

I am not quite certain about the parent child selector, to navigate from hyper linked clicked to its corresponding like count. You may have to play around with JQuery selector to get it right.

ALso, if you are using POST for your view, replace $.get with $.post

Collectives™ on Stack Overflow

Django ajax 'like' button using Jquery?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related