How to use Django-ratings with bootstrap-rating-input

Question

Here goes another star rating question. I want to use bootstrap-rating-input to input rating value (1 to 5) and have django-ratings save the rating to the database. Although I'm a little green with javascript, I really want users to be able to vote using star rating instead of a number input form. Could you show me how to hook up these two apps to make them play nice with each other?

1. What does the view and templates look like?
2. And how do I configure the javascript to make the whole thing work?

Thanks!

Answer 1

OK, boostrap-rating-input is not specifically for django, meaning you will have to do some work to get it going.

I suggest you create a widget for it based on the django-bootstrap-datetime-picker which has implemented a similar bootstrap input field to work nicely with django.

Once that is done, you will be able to add a ratinginput widget to your form which will automatically return a number when the form is submitted, as for django ratings, as long as you have a rating = RatingField(range=5) field in your models you can override it with a rating = ratingWidget() and everything else should take care of itself.

I might try implement the widget later today.

Answer 2

Add this in your head part for test:
<script src="https://raw.githubusercontent.com/javiertoledo/bootstrap-rating-input/master/src/bootstrap-rating-input.js"></script>

now add this code where you want to give a rating

<input class="my_class rating" data-clearable="" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" value="" type="number" onchange="console.log($('input.my_class').rating().val())"/>

and simply you get the no. of rating in console now make a ajax call and add it to your DB .

Note: In case when you try static ratings for user view use code like that
max.times do |i|
%i{class: "glyphicon glyphicon-star#{'-empty' if i>val}"}

remember download bootstrap-rating-input.js file after success