I am using this plugin to show star rating on my Bootstrap website. Here is part of the modal code in which I put the star rating (see the input element):
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="userTitle"></h4>
<input id="avg" class="rating" min=0 max=5 step=0.1 data-size="xs" data-readonly="true" data-show-clear="false" data-show-caption="false">
<small id="tot_reviews"></small>
</div>
<div class="modal-body">
Here is the part of JS code in which I dynamically set the value of the stars:
$.getJSON("getData.php?rating=" + user.id, function(data) {
if (data) {
$.each(data, function(key, val) {
var reviews = val.tot_reviews;
$('#avg').rating('update', val.average);
$("#tot_reviews").html("(" + reviews + " reviews)").html();
});
}
});
It seems to work well, in fact when I click on an item of the page I get this:
If I click again on the same item I get this:
I can't figure out why this happens.