CODEWITHSUNDEEP
javascriptjqueryajaxtwitter-bootstrapjquery-ias
user765132
user765132

Reputation: 11

Infinite Ajax Scroll: Only loads one page, then stops working

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>&laquo;</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">&raquo;</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

Answers (1)

Fieg
Fieg

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

Related Questions