Django Infinite Scroll 没有运行 Ajax 的东西

Posted 2023-02-24

【中文标题】Django Infinite Scroll 没有运行 Ajax 的东西

【英文标题】：Ajax stuff are not running with Django Infinite Scroll

【发布时间】：2020-09-11 06:14:51

【问题描述】：

我使用了this tutorial 并在 django 中实现了无限滚动并加载了页面。

但是，我的 Ajax 调用仅在首页加载时有效，在随后的延迟加载中无效。我有 followed this answer 使用 $items.each.... 代码块。

但是使用上述方法后，现在航点不再加载页面，我卡在第一页本身（Ajax 调用正在工作）。删除代码后，延迟加载能够加载后续页面。我正在使用带有 Django 3 的 Bootstrap 4。有什么建议吗？

我正在添加阻止延迟加载的脚本。

<script src="% static 'js/jquery.waypoints.min.js' %"></script>
<script src="% static 'js/infinite.min.js' %"></script>
<script>
$(document).ready(function() 
    var infinite = new Waypoint.Infinite(
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () 
        $('.loading').show();
      ,
      onAfterPageLoad: function ($items) 
        $('.loading').hide();
        $items.each(function()
            $(this).find('.like').on('click', likecommentevent);
        
      
    );
);
</script>

编辑：备用更新，但这不是我需要的

我尝试了上面 onAfterPageLoad 的替代方法，并且延迟加载有效。但是现在 Ajax 调用被调用了两次或更多次。

onAfterPageLoad: function ($items) 
        $('.loading').hide();
        $('.like').on('click', likecommentevent);
      

【问题讨论】：

过滤代替查找，效果不佳

无限滚动后，您的 get post 方法是否在模板中工作？我有问题。每当我将 get post 方法放在基于类的视图中并进行有限滚动时。无限加载停止。有什么建议吗？

@Rohan 在使用无限滚动时，您需要将 Ajax 用于 get 和 post 方法。

@ROHAN 也使用 $items 来查找我的答案中显示的控件。

因为它易于实现，但也增加了新的工作.....ajax stufff

【参考方案1】：

<script src="% static 'js/jquery.waypoints.min.js' %"></script>
<script src="% static 'js/infinite.min.js' %"></script>
<script>
$(document).ready(function() 
var infinite = new Waypoint.Infinite(
  element: $('.infinite-container')[0],
  onBeforePageLoad: function () 
    $('.loading').show();
  ,
  onAfterPageLoad: function ($items) 
    $('.loading').hide();
    $items.find('.like').on('click', likecommentevent);
  
);
);
</script>

进一步扩展此likecommentevent 是一个存储有函数的值。 （我的行话远非专业）likecommentevent 来自哪里，它存储什么？它可能看起来像这样：这类似于 upvote/downvote 系统。

var likecommentevent = function(event)

var answerid=$(this).data('answer');
        // Ajax
        $.ajax(
            url:"/save-downvote",
            type:"post",
            data:
                answerid:answerid,
                csrfmiddlewaretoken:"csrf_token"
            ,
            dataType:'json',
            success:function(res)
                var _prevupvote=$(".downvote-count-"+answerid).text();
                if(res.bool==true)
                    $(".downvote-count-"+answerid).text(parseInt(_prevupvote)+1);
                
            
        );
 

无论你有什么功能，都这样存储，然后传入onAfterLoad:function($items) ##here##

【参考方案2】：

加载页面脚本和资源后需要调用你的代码

$(document).ready(function() 
  $(".infinite-container").waypoint(function(direction) 
    // your code
    if (direction === 'down') 
        losdMore();
    
     
  function loadMore() 
    console.log("Loading page " );


    $.waypoints('refresh');
    
);

【讨论】：

做到了。但什么都没有改变。

您正在尝试使用库挂钩。让我写的更容易

我试过了，但没有做对。你能试试我上面的代码并代表它吗？

【参考方案3】：

我终于解决了这个问题。该调用似乎对 $items 非常具体，以便延迟加载工作。 PFB 工作方案供您参考：

<script src="% static 'js/jquery.waypoints.min.js' %"></script>
<script src="% static 'js/infinite.min.js' %"></script>
<script>
$(document).ready(function() 
    var infinite = new Waypoint.Infinite(
      element: $('.infinite-container')[0],
      onBeforePageLoad: function () 
        $('.loading').show();
      ,
      onAfterPageLoad: function ($items) 
        $('.loading').hide();
        $items.find('.like').on('click', likecommentevent);
      
    );
);
</script>