The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jRating : Very flexible jQuery plugin for creating quickly a star rating system

Tags :

Plugin rate :

August, 13th 2013 : jRating v3.1 !! - New option "sendRequest" and new method "onClick"

 

January, 28th 2013 : jRating v3.0 !! - You can reselect the stars to rate X times again.

New Options :
- canRateAgain (boolean) : if true, visitor can rate {nbRates} times (see {nbRates} option below)
- nbRates (integer) : If {canRateAgain}, number of times that a visitor can rate (please see full documentation)

Infos containers changes : id="18_1" become data-average="18" & data-id="1"

 

 

 

jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every details from "the number of the stars" to "if the stars can represent decimals or not".

There is also an option to display small or big stars and images can be changed with any other file easily.

Although jRating can be used with any scripting language, a PHP file that handles the requests is already included in the download package on github.

Implementation: 

1. FIRST, INCLUDE THE CSS & JQUERY FILES

1
2
3
4
5
6
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jRating.jquery.js"></script>

2. ADD YOUR HTML

1
2
3
4
5
6
7
8
9
10
<!-- basic exemple -->
<div class="exemple">
 
   <!-- in this exemple, 12 is the average and 1 is the id of the line to update in DB -->
   <div class="basic" data-average="12" data-id="1"></div>
 
    <!-- in this other exemple, 8 is the average and 2 is the id of the line to update in DB -->
   <div class="basic" data-average="8" data-id="2"></div>
 
</div>

3. NOW, CALL THE JRATING PLUGIN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(document).ready(function(){
      // simple jRating call
      $(".basic").jRating();
 
      // more complex jRating call
      $(".basic").jRating({
         step:true,
         length : 20, // nb of stars
         onSuccess : function(){
           alert('Success : your rate has been saved :)');
         }
       });
 
      // you can rate 3 times ! After, jRating will be disabled
      $(".basic").jRating({
         canRateAgain : true,
         nbRates : 3
       });
 
      // get the clicked rate !
      $(".basic").jRating({
        onClick : function(element,rate) {
         alert(rate);
        }
      });
});
</script>
Options: 
showRateInfo
Boolean
Default : true - Disable the rate info. Can be set to true or false
bigStarsPath
String
Default : 'jquery/icons/stars.png' - Relative path of the large star picture (stars.png).
smallStarsPath
String
Default : 'jquery/icons/small.png' - Relative path of the small star picture (small.png).
phpPath
String
Default : 'php/jRating.php' - Relative path of the PHP page (jRating.php).
type
String
Default : 'big' - Appearance type. Can be set to 'small' or 'big'.
step
Boolean
Default : false - If set to true, filling of the stars is done star by star (step by step).
isDisabled
Boolean
Default : false - If set to true, jRating is disabled
length
Integer
Default : 5 - Number of star to display.
decimalLength
Integer
Default : 0 - Number of decimals in the rate
rateMax
Integer
Default : 20 - Maximal rate
rateInfosX
Integer
Default : 45 - In pixel - Absolute left position of the information box during mousemove.
rateInfosY
Integer
Default : 5 - In pixel - Absolute top position of the information box during mousemove.
canRateAgain
Boolean
Default : false - if true, visitor can rate {nbRates} times (see {nbRates} option below)
nbRates
Integer
Default : 1 - If {canRateAgain}, number of times that a visitor can rate
sendRequest
Boolean
Default : true - Send value to server ?
Methods: 
onSuccess
Function
Returns : (element,rate) - Callback function in case of success during rating.
onError
Function
Returns : (element,rate) - Callback function in case of failure during rating.
onClick
Function
Returns : (element,rate) - Callback function when clicking to a star
Screenshots

Comments

its possible to save in a input ?

For sure you can !

1. In the success response (line 150), you can do something like :

1
2
3
if(!data.error) {
    $('my_input').val(data.rate);
}                                                       

2. In your jRating.php, send the rate in json to the javascript file :

1
2
3
4
5
6
7
8
9
10
11
if(htmlentities($_POST['action'], ENT_QUOTES, 'UTF-8') == 'rating')
{
  $aResponse['rate'] = floatval($_POST['rate']);
  if($success)
  {
    // save into your database or anything else
    ...
    // send the rate to your javascript file
    echo json_encode($aResponse);
  }
}

Can you explain with a sql code i m bit confused it is not updating the current value in mysql database.
Table have to column productno. and rate

how can I do this by ASP.NET? T_T...

Hi, lovely project. My question is, if the initail ratining is 0 it still shows all the stars. E.g. id="0_2"

Don't worry i was being thick. Thanks

HI, great plugin, but how can I send the value of the rating to my server? I don't use PHP.
Even if I go to your JS file and I replace PHPPath with my path, I still get server error 404. Page not found.
Thanks for your help
Matt

Hi Matt,

You have to use PHP ! How can you send the rate to your database without PHP/MySQL ? o_O

If you specify a good path for you PHP file, you should not have a 404 error :)

Great Work! I've got a question.
I try to get an ID from the URL in JRating.php
To save it with the voting into the DB...
BUT: i cant store this id.. any solution?

I get the id by:
$url = JURI::current();
$id = substr( $url, strrpos( $url, '/' )+1 );

Can you give us the value of $url returned by JURI::current(); and the id you are looking for ?

Hi,

Great job. Easy to set up and customize. The best ive seen.
1 point its a bit difficult to put 5/5, 20/20 when decimals are set. Any solution?

Hey,
Here is a strange question cause it would seem simple.
I cannot change the color of the Div which is containing the starts. It just stays white (i.e. has no color)
If I just add a color in the css style sheet under jStar nothing happens and I tried changing some stuff in the .js file but that doesnt work either.

Thanks
Jason

Just set a background on the containing div

Hi, great plugin thanks for the job :)
But I have a question, how do you set the initial value for the stars ?
Let's say, the current average is 4/5, it's easy I just have to call my div id "4_1".
But what if my value is 3.75/5 for example ? I can't call an ID "3.75_1"...
Thanks :)

I have setup with 5 stars but would like to change the mouseover info from example 1/5 to say "awful" to 5 stars being "awesome" on the mouseover info! Great jQuery plugin btw!

Cheers!
Robert

Hi Robert.

Actuallty, it's not possible. You have to change it into the JS file ! Maybe we'll update the plugin to show something like that instead of the rate.
Regards,

Maiki

you can add this string var
...
type : 'big', // can be set to 'small' or 'big'
infoText: ['awful','not bad','ok!','wow','excelent'],
...

and on mousemove
change this line
.html(getNote(newWidth) +' / '+opts.rateMax+'');
to:
.html(opts.infoText[getNote(newWidth)]);

Hi,

is that possible to use jrating with a java server. So, there is a servlet instead of the php page.

Thanks

Yes

You just have to return the answer as json

great plugin,
i have question
i try to output the value in alert in div
cause i have several item want to rate it
but i want every item has rate and the div under it show that
'Your rate has been saved '
thx

Hi,
great plugin, the stars are working fine :)
How about the json response from the PHP file?
I would like to use the message from the PHP file without to change your plugin. Something like:

onSuccess : function(response){
html(response.message);
}

Hi Olaf,

Did you find a away to use the message received from php ?

thanks,

Victor

So, I see this is PHP centric, but am I correct in my presumption that php_path can be set to any server side script? if so, can we get php_path renamed to more agnostic name?

Can I reselect the stars to rate again please help me in this for i m using it in my project

Unfortunately not :(
Maybe in a next revision !

Now you can in the new version jRating 3.0 !

Hey, the plugin is working great. However i was wondering why on my ipad I can still see the border slightly. Its no big deal, I am just curious what causes this and if it is easily fixable.

Thanks
Andy

Hi, i try try and try but i dont know how to put the id and rank in mysql can someone post a exemple plz!!!!if dont know how post id plz only rank
REALY THANKS!!!

This plugin seems great except for the fact that the author has decided to force you into using his own update implementation.

Putting the database row id delimited by an underscore as the id is really dumb. And this is exactly why I despise PHP and the people who praise it. Why don't you just stick to jQuery and let the real software developers take care of the rest.

hi,
nice plugin but i dont use PHP.

can anyone help me with ASP and saving it to a DB?

thx

how come there is no option for a default value, if there is I donot know how to do it. I mean that when the page load let say I want to show 3 stars out of 5 in red color for some other 2 out of 5 stars. how can I can do that. Thank you

Hi,

Thanks to read the documentation of the plugin.
If you want to fill 3 stars out of 5 when the page load, you have to do something like :

1
2
<!-- 3 is the average and 1 is the id of the line to update in DB -->
   <div class="basic" data-average="3" data-id="1"></div>

And

1
2
3
$(".basic").jRating({
   length : 5
});

Thanks

Hi, this default Value option does not work in 3.0. What is here wrong? All my default Values are rated whith 0 stars.

I typed

and

$(".basic").jRating({
length : 5
});

nothing.

Hi Jan,
It works.. Just take a look to our demonstration page !

I think you have a JS error on your page.

Regards

hi
great plugin but is have one question
how i can set rating on startup
for example if already give rating to any one then how to show his/her rating on next time.

Hi, I'd like to include this on a plain html file (No php, rails, etc..) can the user input be saved on a text file on the same directory? (For example, 01.html input will be saved on 01.rating, etc...)

thank you.

Could this plugin write its votes to a text file and then display them correctly? If not, Could it call a perl script, that would write the votes down the text file, and then read it?

Comment faire pour mettre une valeur par defaut.Par exemple 3 etoiles sur 5 checked

thnak you so much it's very good to use it in projects

i haev problem to using this plugin for rtl sites how can i fix this

how can i get star value at onclick?
I want to update rating innerhtml on succes
I have
star star star star star
9.2

from
5

votes

onSuccess : function(){
rate=(star.value+rate.value)/(votes.value+1)
},

thank you

Hi, is there any method to skip the jRating.php file?

I am doing this in pure HTML, so I dont need the php server workings.

Thank you

why its not possible rate a video by different users logins.?
Is it possible for this code to make the calculation on rating?

Great work ! Easy to use, thank you !

How to display each star with different size? Example: (star1) height: 10px; (star2) height: 15px, etc..

Thank you.

Hi Luidi,

Unfortunately, it's not possible. Each star must have the same size :(

Regards,

hi,
how do you set the initial value for the stars based on my database value,suppose
for example.
select rating from tblrating;
Answer:4

i have set 4 stars out of 5 any solutions you have?

Hi Nags,

You just have to do something like :

1
<div class="basic" data-average="4" data-id="{ID of your row}"></div>

Regards

suppose my data base value gets changes dynamically how handle this situation?i.e,first time 3stars are enabled next time 4 stars etc...

hi,
based on my database value i have set the rating.how you will set the stars based on dynamic values?

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
3.1
Browsers compatibility
Google ChromeIE 7IE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [147]