Reputation: 8421
I am tryng to run a star rating component in the most simplest approach. I got most of the code from this link. But unfortunately, nothing appears in the page.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./rating-stars.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./rating-stars.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever1" class="rating-value" value="2.56">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever2" class="rating-value" value="1.9">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever3" class="rating-value" value="4.1">
</div>
</div>
</div>
</div>
</body>
</html>
and then a simple css file called as rating-stars.css
:
.star-rating {
line-height:32px;
font-size:1.25em;
}
.star-rating .fa-star{color: yellow;}
and finally the javascript file is:
var $star_rating = $('.star-rating .fa');
var SetRatingStar = function() {
return $star_rating.each(function() {
if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
return $(this).removeClass('fa-star-o').addClass('fa-star');
} else {
return $(this).removeClass('fa-star').addClass('fa-star-o');
}
});
};
$star_rating.on('click', function() {
$star_rating.siblings('input.rating-value').val($(this).data('rating'));
return SetRatingStar();
});
SetRatingStar();
$(document).ready(function() {
});
The problem is, no star appears in the page. I checked the console, and it seems that, everything is fine, and there is no error.
Upvotes: 1
Views: 999
Reputation: 6699
you can use the rateYo plugin
$(function () {
$(".rateyo").rateYo({
starWidth: "80px"
}).on("rateyo.change", function (e, data) {
var rating = data.rating;
$(this).parent().find('.result').text('rating :'+ rating);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
<div class="rateyo"
data-rateyo-rating="1.5"
data-rateyo-num-stars="5"></div>
<span class='result'>0</span>
</div>
Upvotes: 2
Reputation: 20286
I don't see link to font awesome. There're multiple ways to add it check
http://fontawesome.io/get-started/
The simplest solution add between <head></head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Upvotes: 0
Reputation: 2795
It's using a custom font from fontawesome to create the stars (referenced from here: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css). The font is relative to that CSS file, so you either need to ensure you're including that file or that you have the fonts locally.
Upvotes: 0