Star Rating in Repeat using Rateit.js

I’ve implemented a nice little star rating system in a repeat using Rateit.js so thought I would share.

Step 1 - download the zip file from https://github.com/gjunge/rateit.js to your project folder. Unzip and upload the rateit.js-master folder to your server.

Step 2 - put a reference to the js and css files on your page like so…

    <script src="rateit.js-master/scripts/jquery.rateit.js" type="text/javascript"></script>
    <link rel="stylesheet" href="rateit.js-master/scripts/rateit.css" />

Step 3 - Make sure you have jquery on your page.

Step 4 - Create two server connects. One to get your items for the repeat, and another to update the ratings. Mine look like this…

<dmx-serverconnect id="sc_repeat_bits" url="dmxConnect/api/get_bits.php"></dmx-serverconnect>

<dmx-serverconnect id="sc_update_bit" url="dmxConnect/api/update_bit.php" noload></dmx-serverconnect>

Step 5 - Create a repeat for your data and within that have a div to hold your ratings (and whatever other info you want). Note I’ve added 3 custom data to that div; id, bit_id and rating. id is a concatenation of the word “bit” and the bit_id. This will be the id for that item that the code will refer to. bit_id and rating are just straight up data from our repeat and are the data we’ll pass to the update.

    <div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="sc_repeat_bits.data.repeat">
    <div class="col w-100">
        <p dmx-text="bit_title"></p>
        <div class="rateit" dmx-bind:id="'bit'+bit_id" dmx-bind:bit_id="bit_id" dmx-bind:rating="rating"></div>
    </div>
</div>

Step 6 - The code to make it happen…

    $(document).ready(function() {
       setTimeout(function() {
        $('.rateit').each(function(index, el) {
             $('#'+el.id).rateit({ max: 5, value: $(el).attr("rating")}); 
             $('#'+el.id).bind('rated', function(el) { 
                  var new_rating = $(this).rateit('value');
                  var bit_id = el.currentTarget.attributes.bit_id.value; 

dmx.parse(‘sc_update_bit.load({bit_id:’ + bit_id + ’ , rating: ’ + new_rating + ’ })’);
});
});
}, 1000);
});

Sorry if the code looks a mess. The preview doesn’t look anything like what it does when typing.

Note that I’m running this in the ready function with a timeout. I tried to get this to run on the server connect ondone/onsucess but it didn’t work. There does not seem to be a done function for the repeat itself (which would be handy, IMHO).

Basically the code iterates over all the items with the .rateit class, initializes the ratings and then binds the actions to take when the rating is changed.

I poked around a bit to figure out how to get the bit_id. What I have works but if there’s a better/more direct way to get that I’d love to know how.

There’s an examples page at http://gjunge.github.io/rateit.js/examples/#ex_2a with lots of other options you could implement if need be.

Hope that helps.