web2py[:]

Star Rating Widget
Recipe by Nathan Freeze (mrfreeze) on 2009-09-05 in Widget

This is how I got a star rating widget implemented on this site.

1) Download the jQuery star rating widget from here

2) Extract the files to web2py/applications/your_app/static/stars folder

3) Include the necessary files in your app's web2py_ajax.html file:

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js" type="text/javascript"></script>
<script src="{{=URL(r=request,c='static/stars',f='ui.stars.js')}}" type="text/javascript"></script>
<link href="{{=URL(r=request,c='static/stars',f='ui.stars.css')}}" rel="stylesheet" type="text/css" media="screen" charset="utf-8" />

4) Add this to the end of the web2py_ajax_init function:

jQuery("#stars-wrapper").stars({inputType: "select"});

5) Create your widget function in db.py and apply it to your rating field:

def rating_widget(f,v):
    from gluon.sqlhtml import OptionsWidget    
    return DIV(SPAN(_id="stars-cap"), DIV(OptionsWidget.widget(f,v),_id="stars-wrapper"))
db.define_table('test',Field('rating','integer'))
db.test.rating.requires = IS_IN_SET(range(0,6))
db.test.rating.widget = rating_widget

6) Try displaying a SQLFORM(db.test). It should appear as a star rating widget.

Note: A similar method can be used to make a represents function for when the rating should be read only. Also, the widget can be ajaxified by looking into the available callback in the stars plugin.

star rating widget

Related slices

Comments (3)

  • Login to post



  • 0
    mandriluy 11 months ago
    How can I adjust this to work with multiple ratings-style widgets on one form? I have a table with 6 integer fields, which I would all like to use this widget. However, when I do crud.create(db.staff_target), then I only get one star widget? I'm assuming that it's something to do with the _id="stars-cap" and _id="stars-wrapper" part of the rating_widget function? Example Snippet 
    
def rating_widget(f,v):
    from gluon.sqlhtml import OptionsWidget
    return DIV(SPAN(_id="stars-cap"), DIV(OptionsWidget.widget(f,v), _id="stars_wrapper"))

db.define_table('my_table',
    Field('rating_procedural', 'integer', label="Procedures" ),
    Field('rating_control', 'integer', label="Game Control"),
)

db.staff_target.rating_procedural.requires=IS_IN_SET(range(0,6))
db.staff_target.rating_procedural.widget=rating_widget
db.staff_target.rating_control.requires=IS_IN_SET(range(0,6))
db.staff_target.rating_control.widget=rating_widget
    I'm assuming that it's something to do with the rating_widget function returning a static id. Any suggestions on how to modify this would be appreciated...

  • 0
    select 2 years ago
    not working for me i get back 2 errors $.widget is not a function anonymous(function())ui.stars.js (line 273) ui.stars.js()ui.stars.js (line 309) [Break on this error] callback: function(e, type) {\nui.stars.js (line 273) jQuery("#stars-wrapper").stars is not a function [Break on this error] jQuery("#stars-wrapper").stars({inputType: "select"});\n i will go into debugging now

  • 0
    select 2 years ago
    never mind i forgot to include the jquery-ui ... stupid me