Django Make Button Ajax

Question

I have a button that increments an upvote. I'd like to make the button with ajax so it does not reload the page. I am trying to follow this, but my button uses <a type="button">. Is this an issue with my html ?

views.py

@login_required
def upvote(request):
    recommendation_id = None
    if request.method == 'GET':
        #recommendation_id = request.GET['recommendation_id']
        recommendation_id = request.POST.get('recommendation_id', False)
    upvotes = 0
    if recommendation_id:
        recommendation = coremodels.Recommendation.objects.get(id=int(recommendation_id))
        user = request.user
        recommendation.votes.up(user)
        upvotes = recommendation.votes.count()
    return HttpResponse(upvotes)

urls.py

url(r'^upvote/', coreviews.upvote, name='upvote'),

html:

<a type="button" id="upvotes" data-recommendation="{{ recommendation.id }}" href="{% url 'upvote' %}" class="btn btn-primary pull-right"><span class="glyphicon glyphicon-thumbs-up"></span>Upvote</a>

ajax.js

$('#upvotes').click(function(event){
    event.preventDefault();
    var recommendation = $(this).attr("data-recommendation");
    $.get('/upvote/', {recommendation_id: recommendation}, function(data){
               $('#upvotes').hide();
    });
});

Current Error:

The page is still reloading on click. The views.py request.GET['recommendation_id'] is unsuccessful.

enter image description here

http://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag — cdvv7788, Jun 30 '15 at 01:36
@cdvv7788 I added `event.preventDefault();` and now I'm getting the error `NameError at /upvote/27/ global name 'reommendation' is not defined` - does this mean there is an issue with the ajax ? (updated code) — Onichan, Jun 30 '15 at 02:33
reommendation is not defined indeed...maybe recommendation is :P — cdvv7788, Jun 30 '15 at 03:14
You have a misprint in total_votes = reommendation.votes.count(). You need "recommendation", not "reOm.." — igolkotek, Jun 30 '15 at 13:22
@aiho updated the question again. i think the only problem now is with `request.GET['recommendation_id']` which is not returning. — Onichan, Jun 30 '15 at 13:57

score 0 · Accepted Answer · answered Jun 30 '15 at 11:49

Your page is reloading because you have event.preventDefault but it's not attached to any event. You have to put in the function as I did below

$('#upvotes').click(function(event){
    event.preventDefault();
    var recommendation = $(this).attr("data-recommendation");
    $.get('/upvote/', {recommendation: recommendation}, function(data){
               $('#like_count').html(data);
               $('#upvote').hide();
    });
});

or remove all the events and use return false at the bottom of the function.

$('#upvotes').click(function(){
    var recommendation = $(this).attr("data-recommendation");
    $.get('/upvote/', {recommendation: recommendation}, function(data){
               $('#like_count').html(data);
               $('#upvote').hide();
    });

    return false;
});

Also, you have no data-recommendation attribute in your upvotes button markup. If you look at the example you're trying to use, you'll see the author has it in this line:

<button id="likes" data-catid="{{category.id}}" class="btn btn-primary" type="button">

I made all the changes and the ajax seems to be getting the request. But it is still printing the message on a new page? Is it possible to not reload the page? http://i.stack.imgur.com/4UAGS.png — Onichan, Jun 30 '15 at 13:29
updated the question again. i think the only problem now is with `request.GET['recommendation_id']` which is not returning. — Onichan, Jun 30 '15 at 13:57
It's no longer reloading? But you could `console.log(recommendation)` just before the `$.get` to see whether it's getting the value. — onyeka, Jun 30 '15 at 17:21

Django Make Button Ajax

Current Error:

1 Answers1