Reputation: 11
I am trying to implement infinite ajax scroll in a Bootstrap modal.
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
:
$(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
.
The problem is, it will only load the next page (page 2) when I scroll down. After that, it stops working (i.e. if I keep scrolling down, it won't load another page).
What am I doing wrong?
Upvotes: 1
Views: 1088
Reputation: 3166
You currently have binded IAS to the window. Try binding to an overflow div by using the following:
$('.infinite-messages-scroll').ias({ /** your options )*/})
See the overflow example: https://infiniteajaxscroll.com/examples/overflow.html
Upvotes: 0