Single Star Rating

by bizamajig

HTML

<link rel="stylesheet" href="http://demos.myjqueryplugins.com/jrating/jquery/jRating.jquery.css">
<script src="http://demos.myjqueryplugins.com/jrating/jquery/jRating.jquery.js"></script>
<script src="http://demos.myjqueryplugins.com/jrating/jquery/icons/stars.png"></script>
<div class="basic" data-average="10" data-id="1"></div>
<br />
<div id="rating" data-average="10" data-id="1"></div>

JavaScript

$( '.basic' ).jRating({
//		For example, set to 3, then you can rate 3 times ! After, jRating will be disabled.
		length : 							1, // For our bizamajig roadmap button, we are using a single star
        bigStarsPath: 					'http://bizamajig.com/images/star-rating/stars.png', 	// path of the icon stars.png
        smallStarsPath: 				'http://bizamajig.com/images/star-rating/small.png',
        type:								'big',
		canRateAgain : 						false,
		nbRates : 							0,
		step: 								false,
		showRateInfo: 						false,
		sendRequest:						false,
		isDisabled:							true,
        maxRate:                             20,
        onSuccess : function(){
			alert('Success : your rate has been saved :)');
		},
//		Get the clicked rate !
		onClick : function( element, rate ) {
			alert( rate );
		}
	});

// DIV vs. START, when path to star is not available - EXAMPLE ONLY!
$("#rating").jRating({
            step:true,
            length : 5,
            canRateAgain : true,
            nbRates : 3,
            onClick : function(element,rate) {

                var data = (rate, 1);
                $.ajax({
                    url: '/echo/xml/',
                    type: 'POST',
                    dataType: 'x-www-form-urlencoded',
                    async:false,
                    contentType: 'application/x-www-form-urlencoded',
                    data: rate,
                    success: function () {
                        console.log('SUBMIT WORKS');

                    },

                    error: function () {
                        console.log('There is error while submit');

                    }

                });  

            }
        });