In this tutorial you’ll be learning how to build a simple rating system with jQuery Mobile and Mobiscroll Rating & Grading Scroller.

Get the source file from here.

What you need

  About 30 minutes of time

  A text editor and a browser

  Wanting to add rating to you mobile webapp or hybrid app

1. Building the HTML

We’re going to create a simple jQuery Mobile page with six movies which you’ll be able to rate and then review your rating in the list.

Resources

First things first… Include the libraries you need.

• jQuery (get it from here)
• jQuery Mobile (download from here)
• Mobiscroll Rating & Grading Scroller (grab it here)

<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
 
<!-- Mobiscroll Rating & Grading scroller that you can get from http://mobiscroll.com/component/rating -->
<link href="css/mobiscroll-2.3.1.custom.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll-2.3.1.custom.min.js" type="text/javascript"></script>

Writing the HTML

We’ll be using a jQuery Mobile split button list. The button on the right will have a star icon, and it will bring up the rating scroller.
The left container will hold the movie title, director and the received rating. Clicking it will take you to the imdb movie page.

The listview consists of an ul and several li elements. Each li element is divided into two anchors.
As you can see the first a element links to iMDB and the second doesn’t link anywhere. We are going to capture the click event of the “star” button, and display the rating control.

The listview is initialized with data- attributes: data-role=”listview” data-split-icon=”star” data-theme=”d”

For more details on jQuery Mobile data attributes go to the jQM data-attributes documentation.

<ul data-role="listview" data-split-icon="star" data-theme="d">
    <li>
	<a href="http://www.imdb.com/title/tt0209144/">
            <h3>Memento <span ID="r0"></span></h3>
            <p>directed by Christopher Nolan</p>
        </a>
	<a href="#" class="showRating" mID="0">Rate Movie</a>
	</li>
    <li>
	<a href="http://www.imdb.com/title/tt0105323/">
            <h3>A Scent of a Woman <span ID="r1"></span></h3>
            <p>directed by Martin Brest</p>
        </a>
		<a href="#" class="showRating" mID="1">Rate Movie</a>
    </li>
    <li>
	<a href="http://www.imdb.com/title/tt1345836/">
            <h3>The Dark Knight Rises <span ID="r2"></span></h3>
            <p>directed by Christopher Nolan</p>
        </a>
	<a href="#" class="showRating" mID="2">Rate Movie</a>
    </li>
    <li>
	<a href="http://www.imdb.com/title/tt0947798/">
	    <h3>Black Swan <span ID="r3"></span></h3>
	    <p>directed by Darren Aronofsky</p>
        </a>
	<a href="#" class="showRating" mID="3">Rate Movie</a>
    </li>
    <li>
	<a href="http://www.imdb.com/title/tt1605783/">
	    <h3>Midnight in Paris <span ID="r4"></span></h3>
            <p>directed by Woody Allen</p>
        </a>
	<a href="#" class="showRating" mID="4">Rate Movie</a>
	</li>
    <li>
	<a href="http://www.imdb.com/title/tt1205489/">
	    <h3>Gran Torino <span ID="r5"></span></h3>
            <p>directed by Clint Eastwood</p>
	</a>
	<a href="#" class="showRating" mID="5">Rate Movie</a>
    </li>
</ul>

2. The javascript (and a little more HTML)

Understanding how mobiscroll works

Mobiscroll transforms selects or inputs into scrollers. It preserves the HTML markup, and populates the input or select with the chosen value.
In our example we’re working with six inputs. Since we don’t need to display them, they can remain hidden. The selected ratings will be reflected in the list.
Now let’s see what’s up with those inputs.

Creating the hidden inputs

Each hidden inut has a unique ID which consists of m and an index (m0,m2…,m5). You notice an mID attribute as well, which is the index itself. We’re going use that index to find the right container for displaying the selected values.

<input ID="m0" type="hidden" mID="0"/>
<input ID="m1" type="hidden" mID="1"/>
<input ID="m2" type="hidden" mID="2"/>
<input ID="m3" type="hidden" mID="3"/>
<input ID="m4" type="hidden" mID="4"/>
<input ID="m5" type="hidden" mID="5"/>

Initializing mobiscroll

Mobiscroll needs to be initialized with certain parameters in order to do the job. We’re going to create a data object and are going to reuse it for initializing every input in a for loop.

Let’s walk through all the properties of the data object first

• theme: ‘jqm’ – use the jQuery Mobile specific look
• display: ‘modal’ – it means we’d like to display the scroller in pop-up (‘inline’ would also be an option, but for conserving space we’re going to use it in modal display mode)
• label: ‘Rate Movie’ – this is the title of the pop-up
• values: [1,2,3,4,5] – let’s display the values next to the stars
• order: ‘desc’ – we are ordering the ratings top-down starting with the 5 at the top
• showText: true – We’re displaying the values next to the stars (if you don’t want to display the values, set it to false)
• onSelect – in order to display the selected rating on the UI we’re going to write a custom handler for the scrollers. We’re going to use the ‘mID’ property of the hidden inputs for finding the right span element and we’ll set its HTML content to reflect the rating.

var data = {
     theme: 'jqm',
     display: 'modal',
     mode: 'scroller',
     label: 'Rating',
     onSelect: function(valueText,inst){
          var movieID = $(this).attr('mID');
	  $('#r' + movieID).html("(" + valueText + "/5)");
     },
     values: [1,2,3,4,5],
     showText: true,
     order: 'desc'
};
 
for (i=0;i<6;i++) {
     $("#m" + i).mobiscroll().rating(data);
}

Displaying the scroller on click

We need to handle the click events of our star buttons. We are doing that in the jQuery click event.
We’re using the mID attribute of the element in order to find the right input so we can call the mobiscroll show function.

Calling it will display the modal scroller, and load the value from the input. The first time it pops up it will display the default value, which is the first item from the list.

$('.showRating').click(function(){
     var movieID = $(this).attr('mID');
     $('#m' + movieID).mobiscroll('show');
})

3. How does it remember the selected value

Mobiscroll stores the selected value in the HTML element it is tied to. If it’s an input, it will store the selected value in the input itself. If it’s a select it will set the selected value.

4. Summary

The intent of this tutorial is to demonstrate how fast and easily you can build a fully functional rating system with jQuery Mobile and Mobiscroll Grading & Rating Preset.
It can be refined in several ways, and we’ve only addressed the client-side aspect of things. So let us know what you think in the comment section below.