Django and AJAX Star Rating System

Question

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

Saving ratings in models is sorted because the rating is displayed on the page. But I want the user to be able to rate the page (1 to 5 in essence) without refreshing or changing the page.

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

There is currently a limited understanding of javascript and AJAX. Does anyone know how to use the stars in the above example in combination with AJAX and Django so that you can update the database (models) without refreshing the page when the user selects a rating?

It is also important that users can vote only once, i.e. they were not allowed to rate the page twice. It is stored in the models, whether they have already been voted and what is their previous vote. But how can I change the stars to show it?

So, if you know how to do this, or a more suitable graphical solution for star rating, or any good tutorials ... please share. Thanks.

Answer 1

AJAX sounds scary and confusing, but it should not be. Essentially, you want to publish some data in a specific url / view compiler. 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 created using radio control and css. Therefore, if you want to show the current rating for the user when loading the page, just create your own template for the associated radio with the checked option.

Answer 2

Jonathan, welcome to the world of django. Since Django is a great environment, some jungonauts have written good sites to help us.

if you go to http://djangopackages.com/categories/apps/ and search for "rating", you will find several django plug-ins with examples to help you with your project.

also see answers to use in another question: Best practices: how best to implement rating stars in Django templates

Answer 3

While working on this recently, I thought that I would suggest a solution for the mix. Firstly, I use RateIt, which, it seemed to me, is very easy to set up and quite intuitve to use (add the RateIt *.js and .*css files to the base.html template):

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

Here are the key parts of 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 belong to 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 the list of objects. This is not ideal, since it would be better to store the ratings as their own model and object reference. That you could store them and perform calculations as averages, etc. I am working on it now and will update this answer when done.