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' %}
{% 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.

Since yesterday I am on this question I tried everything.

This is another user that has tried to help me here https://stackoverflow.com/a/69930878/15042684 but I did not really understand could you please help me to understand it with some code.

this is his answer:

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.

CodePudding user response：

Assuming you are using waypoint's Infinite Scroll, you can use the onAfterPageLoad callback

onAfterPageLoad

Default: $.noop.

Parameters: $items.

This is a callback that will fire at the end of the request cycle, after new items have been appended to the container. It is passed one parameter, which is a jQuery object of all the items that were appended during the page load.

Note that despite using the jquery convention of $name indicates a jquery object and stating is a jquery object, in this case, trial and error shows that $items are the DOM elements, not a jquery object.

No example provided in the docs, so it will probably look something like:

  <script>
    var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],
      onAfterPageLoad: function(items) {
          $(items).find(".stars").stars();
      } 
    });
  </script>