由于javascript调用，无限滚动工作但没有填充所有数据

Posted 2023-02-24

【中文标题】由于javascript调用，无限滚动工作但没有填充所有数据

【英文标题】：infinite scroll working but not populating all data because of javascript call

【发布时间】：2021-12-24 17:24:30

【问题描述】：

在我的网站中，我想显示用户评分 - 为此我使用了无限滚动，但我遇到了一个问题。

当它在调用<a class="infinite-more-link" href="?page= ratings.next_page_number "></a>之前第一次加载数据时，它会显示带有票数的星星，但是当调用<a class="infinite-more-link" href="?page= ratings.next_page_number "></a>之后它没有显示星星。

我的意见.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 "  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 class="fas fa-star"></i>');
        var halfStar = ((rating%1) !== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        var noStar = new Array(Math.floor($(this).data("numStars") + 1 - rating)).join('<i class="far fa-star"></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 class="fas fa-star"></i>'.repeat(Math.floor(rating));
        const halfStar = (rating%1!== 0) ? '<i class="fas fa-star-half-alt"></i>': '';
        const noStar = '<i class="far fa-star"></i>'.repeat(Math.floor(numStars-rating));
        $(this).html(`$fullStar$halfStar$noStar`);
    );

</script>
<script>
            $(function()
                $('.stars').stars();
            );
        </script>
% endblock %

我试图将<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"> 放在class="infinite-item" 中，但没有帮助。这可能是什么原因？谢谢。

从昨天开始我就在这个问题上尝试了一切。

这是另一个试图在这里帮助我的用户https://***.com/a/69930878/15042684，但我真的不明白你能帮我用一些代码理解它吗？

这是他的回答：

看起来 .stars() 不会寻找添加到 DOM 的新元素。您应该在 Waypoint.Infinite 中寻找回调函数配置选项，您可以在新元素上调用 .stars()。

【问题讨论】：

$.fn.stars 仅适用于代码运行时存在的元素。如果您稍后添加元素，代码不会自动选择新元素。将新元素添加到 DOM 后，您需要对它们运行 $.fn.stars。

【参考方案1】：

假设你使用的是航点的Infinite Scroll，你可以使用onAfterPageLoad回调

onAfterPageLoad

默认值：$.noop。

参数：$items。

这是一个回调，将在请求周期结束时触发，新项目已附加到容器后。它被传递一个参数，该参数是页面加载期间附加的所有项目的 jQuery 对象。

请注意，尽管使用 $name 的 jquery 约定表示一个 jquery 对象并声明 是一个 jquery 对象，但在这种情况下，反复试验表明 $items 是 DOM 元素，而不是一个 jquery 对象。

文档中没有提供示例，所以它可能看起来像：

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

【讨论】：

如何将项目传递给 onAfterPageLoad: 函数？我已经尝试过您的代码，但我没有看到星级评分。

根据（非常有限的）文档，新生成的元素在我的代码中以$items（items)）的形式传入。但我无法从你的代码中看到那将是什么 -尝试调试回调，看看你实际得到了什么。也许它应该是items.filter(".stars").stars() - 也许你的无限加载器没有加载任何星星？

也许您可以编辑您的问题并在 html/css/javascript(jquery) 中添加有效的 sn-p？所有% % 都让人难以阅读。

非常感谢。上帝保佑我终于解决了。这是正确的功能onAfterPageLoad: function(items) $(items).find(".stars").stars();请尝试更新您的答案。

您需要事件委托。例如，您需要使用$(document).on("click", ".btn", ... 而不是$(".btn").click(...，有关详细信息，请参阅this question。