Raty: a great rating plugin for jQuery

A project that I am currently working on requires users to write product reviews. A standard feature of any review system is to allow the user to rate the product. A quick google search lead me to jQuery.Raty by Washington Botelho (@wbotelhos). I wanted to find something that would be very quick to implement, and requires minimalistic code. Raty does just that. With excellent documentation, I had this up and running within mere minutes.

Implimentation

Since Raty is a plugin for jQuery, you will need to include jQuery as a dependancy:

<script type="text/javascript" src="/js/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="/js/jQuery.Raty.js"></script>

 

Using raty is very straight forward. Consider:

<div class="raty"></div>
<script type="text/javascript"></script>

This will give you the default implementation without any options being set, however I wanted to expand on this further. I wanted to ensure that:

  • I could use custom images on the scale
  • I could have half ‘stars’ for ratings rather than sticking to whole numbers
  • …and most importantly, post the result back to the server

Raty allowed for all of these requirements, and so I ended up with:

<div class="raty"></div>
<script type="text/javascript">
        $('.raty').raty(
            {
                path: '/images/raty',
                half: true,
                target: '#Rating',
                targetType: 'score',
                targetKeep: true
            });
</script>

It’s important to note the use of the target settings in the above snippet. Raty will show the selected rating on another element by setting it’s ID. I used a textbox with ID “Rating” and set the targetType to “score”. This gave me a numerical value in a textbox that I can then post back to the server for processing into the database. It’s also important to set targetKeep to “true” else the value will not stay in the textbox once set(it just updates as you hover over the stars), and thus won’t be there when you come to post back.

If like me you are using ASP.NET Webforms, you need to set the ClientIDMode of the textbox to “Static” so that the resulting element’s ID is “Rating” and not ASP’s abomination of an ID like: “ctl00_ContentPlaceHolder1_Rating” when ClientIDMode is set to the default “Inherit”.

<asp:TextBox ID="Rating" runat="server" hidden="hidden" ClientIDMode="Static"></asp:TextBox>

Further to being able to just set a rating, I also wanted to make sure that I can display the rating on a separate page, but not allow the user to submit an anonymous rating on that page. Raty’s readonly setting coupled with applying data-score=”4.5″ to the target div element made this possible.

<div data-score="1"></div>
$('div').raty({
  readOnly: true,
  score: function() {
    return $(this).attr('data-score');
  }
});

Overall I’m very impressed with this plugin as it has allowed me, a non-javascript developer, to quickly implement it.

If you have any issues with the plugin, check out the comments on the plugin’s documentation page. Most of the common issues other have had are addressed there by the developer himself.

  • Washington Botelho

    Hi Dan,

    You can use the option `targetScore` to change the place where the score will be keeped. The option `target` is used just for visualization thats why the target is not keepd by default. πŸ˜‰

    Mini tips:

    1. If you are using HTML 5, you do not need to declare the `type` on `script` tag;

    2. You can use pure JS `this.getAttribute(‘data-score’)` instead of instantiate the jQuery `$(this)`.

    Thanks for the article. (:

    • Thanks for the tips Washington! Declaring the type on the script tag is a force of habit haha.

      You’re welcome, keep up the great work! πŸ™‚

  • It’s a pain in the butt in Rails… Unless I’m just a bad programmer, lol.