jQuery Infinite Scroll with Twitter BootStrap Modal

Question

I need to display records in a Twitter BootStrap Modal. I also need to implement infininte-scrolling so that when user scrolls to bottom of the modal, it fetches more records.

I created a demo based on How To: Create Infinite Scrolling with jQuery wiki of Kaminari which uses infinite-scroll jQuery plugin.

Here is how I configured it

Modal HTML

<div tabindex="-1" role="dialog" id="mediaLibraryModal" class="modal fade" aria-labelledby="exampleModalLabel">
        <div role="document" class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" data-dismiss="modal" class="close" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
              <h4 id="exampleModalLabel" class="modal-title">Media Library</h4>
            </div>
            <div class="modal-body">
              <div id="media-images">
                <div class="page">
                  <p class='media-image'><img src='...'/></p>
                  <p class='media-image'><img src='...'/></p>
                  . . .
                </div>
              </div>
              <div id="paginator"></div>
            </div>
          </div>
        </div>
      </div>

coffee script to enable autoscrolling

$(document).ready ->
  $("#media-images .page").infinitescroll
    navSelector: "ul.pagination" # selector for the paged navigation (it will be hidden)
    nextSelector: "ul.pagination a[rel=next]" # selector for the NEXT link (to page 2)
    itemSelector: "#media-images p.media-image" # selector for all items you'll retrieve

CSS

#mediaLibraryModal .modal-dialog .modal-body {
  max-height: 420px;
  overflow-y: auto;
}

It works perfectly for normal pages. It loads more records as user scroll to end of page but same doesn't work with Twitter BootStrap Modal.

It seems it must related to height of window or modal but I am not css guy. Can anybody please guide how to fix it?

Infinite scroll usually triggers based on scroll position on the body - my guess is you'd have to change the monitor of the scroll to the modal instead - hard to answer without a working example — StudioTime, Nov 23 '15 at 10:41

score 0 · Answer 1 · answered Nov 24 '15 at 06:11

It is kind of hack but it works in my case. It doesn't have exact behavior of infininte-scroll but it perfactly serves the purpose.

Here is how I have configured infinitescroll

$(document).ready ->
  $("#media-images .page").infinitescroll
    navSelector: "ul.pagination" # selector for the paged navigation (it will be hidden)
    nextSelector: "ul.pagination a[rel=next]" # selector for the NEXT link (to page 2)
    itemSelector: "#media-images div.media-image" # selector for all items you'll retrieve
    prefill: needToLoadMoreImages()

window.needToLoadMoreImages = ->
  mod = $('#mediaLibraryModal .modal-body')
  mod.scroll ->
    if $(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight #http://stackoverflow.com/questions/6271237/detecting-when-user-scrolls-to-bottom-of-div-with-jquery
      $('.pagination li.active + li').find('a').click() #This is hack. Ideally this function shouldn't needed at all
      return true
    false
  return

Configured prefill function is called for when viewport is full and fetch next page content within this function.

I am still looking for elegant solution.

jQuery Infinite Scroll with Twitter BootStrap Modal

1 Answers1