in my web site i want to show the user ratings for that i used the infinite scroll but i am facing one problem.
when it first loads the data before calling the <a href="?page={{ ratings.next_page_number }}"></a> it is showing the star with the count of vote,but when after calling the <a href="?page={{ ratings.next_page_number }}"></a> it is not showing the star.
my views.py

@login_required
def ratings_user(request,pk):
    ratings = VoteUser.objects.filter(the_user_id=pk).order_by('-pk')
    paginator = Paginator(ratings, 1)
    page = request.GET.get('page')
    try:
        posts = paginator.page(page)
    except PageNotAnInteger:
        posts = paginator.page(1)
    except EmptyPage:

        posts = paginator.page(paginator.num_pages)
    return render(request,request.session['is_mobile'] 'profile/ratings.html',{'ratings':posts})

html

{% extends 'mobile/profile/base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% load get_companion %}
{% load cache %}
{% block title %}
Ratings
{% endblock %}

{% block leftcontent %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
{% endblock %}
{% block middlecontent %}
 <div class="infinite-container">

{% for i in ratings %}
 <div class="infinite-item">
     
<div class="w3-container w3-card w3-white w3-round w3-margin">
    <img src="{{ i.the_user.profile.avatar.url }}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:40px;height:40px;border-radius:50%;">

        <a href ="{% url 'profile' i.the_user_id %}" style="color:black;">{% with user=i.the_user.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}</a>
        <br>

       <span class="stars" data-rating="{{ i.vote.vote }}" data-num-stars="5" ></span>
        <hr class="w3-clear">
        <p>
        {{ i.commentaire|linebreaksbr }}
        </p>
        <span class="glyphicon glyphicon-user"></span> <a href ="{% url 'profile' i.the_sender_id %}">{% with user=i.the_sender.profile %}{{ user.prenom|title|truncatewords:2 }} {{ user.nom|title|truncatewords:1 }}{% endwith %}</a>
</div>
</div>
{% endfor %}
</div>
   {% if ratings.has_next %}
    <a class="infinite-more-link" href="?page={{ ratings.next_page_number }}"></a>
  {% endif %}
{% endblock %}
{% block rightcontent %}

{% endblock %}
{% block js %}
  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0]
    });
  </script>
<script>
//ES5
$.fn.stars = function() {
    return $(this).each(function() {
        var rating = $(this).data("rating");
        var fullStar = new Array(Math.floor(rating   1)).join('<i ></i>');
        var halfStar = ((rating%1) !== 0) ? '<i ></i>': '';
        var noStar = new Array(Math.floor($(this).data("numStars")   1 - rating)).join('<i ></i>');
        $(this).html(fullStar   halfStar   noStar);
    });
}

//ES6
$.fn.stars = function() {
    return $(this).each(function() {
        const rating = $(this).data("rating");
        const numStars = $(this).data("numStars");
        const fullStar = '<i ></i>'.repeat(Math.floor(rating));
        const halfStar = (rating%1!== 0) ? '<i ></i>': '';
        const noStar = '<i ></i>'.repeat(Math.floor(numStars-rating));
        $(this).html(`${fullStar}${halfStar}${noStar}`);
    });
}
</script>
<script>
            $(function(){
                $('.stars').stars();
            });
        </script>
{% endblock %}

i have tried to put the <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> inside the but it does not help.what might be the reason for that ? Thanks.

CodePudding user response：

It doesn't look like .stars() will look for new elements being added to the DOM. You should look for a callback function configuration option within Waypoint.Infinite that you can call .stars() on the new elements.