jRate jquery plug : how to get rating value

Question

I've been looking thru the docs and another question that was close to what I needed for help with the jRate star rating jQuery plugin, but I was not able to get the output I was looking for. What I am looking to do is to get an output of the numerical rating value when I click a button.

With this html :

<div id="ratingContainer">
<div id="currentValue" style="width: 70px; height: 70px; border: 1px solid black; background-color: blue; color: white" >Rating value</div>
<input type="button" id="ratingClicker" value="get rating!" onclick="getRatingValue()" />

</div>

and this javascript :

function getRatingValue(){  
    $(document).ready(function(){       
        $('ratingContainer').jRate({
            onSet: function(rating){
                $('ratingValue').text(rating);
            }
        })
    });
}

function getSimpleStarRatingHtml(){
    $(document).ready(function() {
        $("#ratingContainer").jRate({
            width: 60,
            height: 60,
            startColor: '#3366FF',
            endColor: '#9966FF'
        });
     });
}

The getSimpleStarRatingHtml() function populates the empty stars in the ratingContainer div when the user pulls a select dropdown.

The getRatingValue code was cribbed from the other StackOverflow question I linked to.

I realize this is probably a basic jQuery Q; I'm a little bit of a noob with it. Thanks.

Update

The code below does give me the output for the rating value I want, but does not allow me to set any options for the appearance of the stars (height, color, etc):

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
    function createJrate(){

        $('#rating').jRate({
            onChange: function(rating){
                $('#ratingValue').text(rating);
            }           
        });

    }


</script>   

<style>
    #rating{
        width: 300px;
        height: 140px;
        border: 1px black solid;
    }
</style>
</head>
<body>
<h1>test</h1>
<input type="button" value="create rating" onclick="createJrate()" style="margin-bottom: 15px"/>

<div id="rating"></div><div id="ratingValue"></div>

</body>
</html>

Have tried a bunch of variations, like adding the rating function after the close bracket that ends the options, tried tying the $('#ratingValue').jRate() to a var, and then calling the function, as in jRate.change(function(){// stuff in here});.

Any other ideas you may have? thanks

Could you put a sample of your code on jsfiddle? – jcvegan Aug 04 '15 at 15:27 — jcvegan, Aug 04 '15 at 15:27

score 0 · Answer 1 · answered Aug 08 '15 at 21:44

0

If your logic works and you're just looking to change the styling, have you considered simply overriding the standard CSS for the script to have it render with the colors and formatting that you'd prefer?

answered Aug 08 '15 at 21:44

Whit Waldo

4,806
4
48
70

score 0 · Accepted Answer · answered Aug 11 '15 at 23:30

was able to get it working by defining the jRate obj this way...

        $('#rating').jRate({
            onChange: function(rating){
             $('#ratingValue').text("rating " + rating);
            }, 
            startColor: 'blue',
            endColor: 'blue',
            width: 50,
            height: 50
        });

jRate jquery plug : how to get rating value

Update

2 Answers2