jQuery code is not working in second page - php

Question

I have following script to show the ratings for courses. But it is working properly for pagination first page showing 5 stars, when it comes to second page it showing 10 stars. Code is like below,
<div class="ft-item">
<div class="rating_<?php echo $row->courseId;?>">
</div>
<script>
$('.rating_<?php echo $row->courseId;?>').raty({
starOff : '<?php echo base_url()?>public/images/star/icon-star-2.png',
starOn : '<?php echo base_url()?>public/images/star/icon-star-1.png',
starHalf: '<?php echo base_url()?>public/images/star/icon-star-3.png',
readOnly : true,
half : true,
score : <?php echo $r;?>,
space : true
});
</script>
First page course image
In this course five stars are displaying and located in first page.
Second page course image
In this course 10 stars are displaying and located in second page.
Is the above script is not binding in second page?

Answer 1

As you are calling the pagination via ajax, then you need to call your script after ajax response in the success function too. But the problem is that your score needs to be specific to every book/item, you need to change the
score : <?php echo $r;?>
and
$('.rating_<?php echo $row->courseId;?>')
and get the score via javascript rather than php and move the function into ajax success. Now to get the data from the javascript and removing php you need to use data attributes for this purpose add the rating like data-rating=<?=r?> whie populating the html via php and then use .each and iterate all elements and get the respective data-rating attribute in javacript via $(element).data('rating') and assign to the rate option. You can see the below example how to populate the rating based on the data attrbutes you just need to copy this javascript and update you html accordingly and you are done.
$('.rating').each(function() {
var ele = $(this);
$(ele).raty({
starOff: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-off.png',
starOn: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-on.png',
starHalf: 'https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/images/star-half.png',
readOnly: true,
half: true,
score: ele.data('rating'),
space: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/jquery.raty.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/raty/2.8.0/jquery.raty.js"></script>
<div class="ft-item">
<div class="rating" data-rating="3"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="2"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="1"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="5"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>
<div class="ft-item">
<div class="rating" data-rating="4"></div>
</div>