[英]Infinite Ajax Scroll: Only loads one page, then stops working
I am trying to implement infinite ajax scroll in a Bootstrap modal.我正在尝试在 Bootstrap 模式中实现无限 ajax 滚动。
Here is what the modal looks like (without any data loaded yet):这是模态的样子(还没有加载任何数据):
<div class="modal fade" id="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="infinite-messages-scroll">
</div>
</div>
</div>
</div>
</div>
When the modal is shown, I load the first page of data into the modal, and then I initialize infinite-ajax-scroll
:当显示模态时,我将第一页数据加载到模态中,然后初始化infinite-ajax-scroll
:
$(document).on('show.bs.modal', '.modal', function(event) {
var modal = $(this);
var modalBody = modal.find('.modal-body');
$.ajax({
url: 'http://www.website.com/messages',
type: 'get',
dataType: 'html',
success: function(html) {
modalBody.find('.infinite-messages-scroll').append(html);
var infiniteScroll = $.ias({
container: '.messages-container',
item: '.message',
pagination: '.pagination',
next: '.pagination li.active + li a',
delay: 0,
negativeMargin: 500
});
infiniteScroll.on('loaded', function(data, items) {
var html = $(data);
$('.modal-body').find('.messages-container').append(html.closest('.messages-container').html());
});
}
});
});
And here is what the response from the server looks like when requesting a new page:这是请求新页面时来自服务器的响应的样子:
<div class="messages-container">
<div class="message">Message1</div>
<div class="message">Message2</div>
<div class="message">Message3</div>
<div class="message">Message4</div>
<div class="message">Message5</div>
</div>
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1</span></li>
<li><a href="http://www.website.com/messages?page=2">2</a></li>
<li><a href="http://www.website.com/messages?page=3">3</a></li>
<li><a href="http://www.website.com/messages?page=4">4</a></li>
<li><a href="http://www.website.com/messages?page=5">5</a></li>
<li><a href="http://www.website.com/messages?page=6">6</a></li>
<li><a href="http://www.website.com/messages?page=7">7</a></li>
<li><a href="http://www.website.com/messages?page=2" rel="next">»</a></li>
</ul>
So when the next page is loaded, I catch this in the loaded
event (above), and append the new messages to the modal's .message-container
.因此,当加载下一页时,我会在loaded
事件(上图)中捕获它,并将新消息附加到模式的.message-container
。
The problem is, it will only load the next page (page 2) when I scroll down.问题是,当我向下滚动时,它只会加载下一页(第 2 页)。 After that, it stops working (ie if I keep scrolling down, it won't load another page).在那之后,它停止工作(即如果我继续向下滚动,它不会加载另一个页面)。
What am I doing wrong?我做错了什么?
You currently have binded IAS to the window.您当前已将 IAS 绑定到窗口。 Try binding to an overflow div by using the following:尝试使用以下方法绑定到溢出 div:
$('.infinite-messages-scroll').ias({ /** your options )*/})
See the overflow example: https://infiniteajaxscroll.com/examples/overflow.html查看溢出示例: https : //infiniteajaxscroll.com/examples/overflow.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.