Django star rating system and AJAX

Question

I am trying to implement a star rating system on a Django site.

Storing the ratings in my models is sorted, as is displaying the score on the page. But I want the user's to be able to rate a page (from 1 to 5 essentially) without a refresh or change of page.

I have found the following, and like the style of the stars here: http://jvance.com/blog/2008/09/22/JQueryRaterPluginNew.xhtml

Currently have a limited understanding of javascript and AJAX. Does anyone know how to use the stars in the above example combined with AJAX and Django, so you are able to update the database (models) without a page refresh when a user selects a rating?

It is also important that users are only able to vote once, i.e. they are not allowed to rate a page twice. It is stored in the models whether they have already voted and what their previous vote was. But how would I be able to modify the stars to show this?

So if you know how to do these things, or a more appropriate star rating graphics solution, or any good tutorials... please do share. Thank you.

Answer 1

AJAX sounds scary and confusing but it doesn't have to be. Essentially what you want to do is post some data to a particular url/view combo. See jQuery.post for more information on using AJAX to send data to the server.

#urls
urlpatterns += patterns('',
url(r'^article/rate/', 'article.rate'),

#views 
def rate(request):
    if request.method == 'POST':
       # use post data to complete the rating..

#javascript
$.post("/article/rate", { rating: 3, article: 2 },
    function(data) {
       // success! so now set the UI star to 3
});

As far as I know, star-ratings are produced with radio controls and css. So if you want to show the current rating per user on load of the page, just have your template render the associated radio with the checked option.

Answer 2

Jonathan you are welcome to the django world. as Django is a cool framework some djangonauts have written nice sites to help us.

if you go to http://djangopackages.com/categories/apps/ and search "rating" you will find some django pluggables with examples that will help you a lot with your project.

also see those util answers in another question: Best Practices: How to best implement Rating-Stars in Django Templates

Answer 3

Working on this recently, so thought I would provide a solution to the mix. Firstly, I'm using RateIt, which I have found to be very simple to set up and quite intuitve to use (add the RateIt *.js and .*css files to your base.html template):

http://www.radioactivethinking.com/rateit/example/example.htm

Here are the key pieces to my solution:

urls.py

url(r'^object/rate/$', RateMyObjectView.as_view(), name='rate_my_object_view'),

my_template.html

<div class="rateit" data-rateit-resetable="false">Rate it!</div>

ajax.js

$('.rateit').bind('click', function(e) {

    e.preventDefault();

    var ri = $(this);
    var value = ri.rateit('value');
    var object_id = ri.data('object_id');

    $.ajax({
        url: '/object/rate/?xhr',
        data: {
            object_id: object_id,
            value: value
        },
        type: 'post',
            success: function(data, response) {
            console.log("ajax call succeeded!");
        },
            error: function(data, response) {
            console.log("ajax call failed!");
        }
    });
});

Some view bits are from James Bennett (setting xhr, for example):

http://www.b-list.org/weblog/2006/jul/31/django-tips-simple-ajax-example-part-1/

views.py

from django.views.generic.base import View
from .models import MyObject

class RateMyObjectView(View):

    def post(self, request):

        my_object = MyObject.objects.all().last()

        xhr = 'xhr' in request.GET
        star_value = request.POST.get('value', '')

        my_object.score = star_value
        my_object.save()

        response_data = {
            'message': 'value of star rating:',
            'value': star_value
        }

        if xhr and star_value:
            response_data.update({'success': True})

        else:
            response_data.update({'success': False})

        if xhr:
            return HttpResponse(json.dumps(response_data), content_type="application/json")

        return render_to_response(self.template_name, response_data)

models.py

from django.db import models

class MyObject(models.Model)
    score = models.FloatField(max_length=1, default=0)

Keep in mind that this is a naive solution, and simply replaces the current star score in the last item in your object list. It's not ideal, as it would be better to store scores as their own model and link to the object. This was you can store them and do calculations like average, etc. I'm working on this now and will update this answer when I'm finished.