jQuery Infinite Scroll avec Twitter BootStrap Modal

Question

Je dois afficher les enregistrements dans un Twitter BootStrap Modal. J'ai également besoin d'implémenter infininte-scroll afin que lorsque l'utilisateur fait défiler vers le bas du modal, il récupère plus d'enregistrements.

J'ai créé une démo basée sur le wiki How To: Create Infinite Scrolling with jQuery de Kaminari qui utilise le plugin jQuery infinite-scroll.

Voici comment je l'ai configurée

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> 

script café pour permettre le défilement automatique

$(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; 
} 

Fonctionne parfaitement pour les pages normales. Il charge plus d'enregistrements que l'utilisateur fait défiler jusqu'à la fin de la page, mais cela ne fonctionne pas avec Twitter BootStrap Modal.

Il semble qu'il doit être lié à la hauteur de la fenêtre ou modal mais je ne suis pas css guy. Quelqu'un peut-il guider s'il vous plaît comment le réparer?

Answer 1

C'est un peu un hack mais ça marche dans mon cas. Il n'a pas le comportement exact d'infininte-scroll mais il sert parfaitement le but.

Voici comment j'ai configuré 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 

Configuré fonction prefill est appelée lorsque viewport est pleine et chercher ensuite le contenu de page dans cette fonction.

Je suis toujours à la recherche d'une solution élégante.