If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!

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.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.

Related slices

Comments (3)

  • Login to post

  • 0
    mandriluy 10 years 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"))
        Field('rating_procedural', 'integer', label="Procedures" ),
        Field('rating_control', 'integer', label="Game Control"),
    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 12 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 12 years ago
    never mind i forgot to include the jquery-ui ... stupid me

Hosting graciously provided by:
Python Anywhere