mercredi 7 juin 2017

Implementing infinite scroll in Bootstrap modal?

I'm trying to implement infinite scroll in a Bootstrap modal. I've tried several infinite scroll libraries but none of them have worked because they all expect a view (HTML) to be returned, whereas I can't do that in a modal (or at least that's the conclusion I've come to).

Has anyone had any success in implementing infinite scroll in a Bootstrap modal? If so, how?

Here is my modal:

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <div class="content-container">
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
               <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
               <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
               <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
               <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
               <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
            <ul class="pagination">
               <li class="disabled"><span>«</span></li>
               <li class="active"><span>1</span></li>
               <li><a href="#">2</a></li>
               <li><a href="#">3</a></li>
               <li><a href="#">4</a></li>
               <li><a href="#">5</a></li>
               <li><a href="#" rel="next">»</a></li>
            </ul>
         </div>
      </div>
   </div>
</div>

As you can see, I need to append more data to the .content-container on each load.

This is the JSON response that my server returns when requesting another page of data:

{"success":true,"data":{"html":"<p>Another</p><p>Another</p><p>Another</p> etc"}}

How can I implement infinite scroll into a Bootstrap modal? Is there a library that might already do this?

Note: I am using Laravel 5.3.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire