Clever Geek Handbook

Load data on scroll down to load model (Lazy Load)

I have a bootstrap modal that is scrollable. I want to load data from an AJAX call when the scroll is removed on the modal bottom (Not Page Bottom). I am using this jQuery code but doesnt work for this mod.

$(window).scroll(function() {
 if($(window).scrollTop() == $(document).height() - $(window).height()) {
       // ajax call get data from server and append to the div
 }
});

Here is my model

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
  <div class="modal-dialog" style="overflow-y: scroll; max-height:85%;  margin-top: 50px; margin-bottom:50px;"> 
    <div class="modal-content"> 
        <div class="modal-header"> 
            <h3 class="modal-title">ASDFASDFASDFASDF</h3> 
        </div> 
        <div class="modal-body">ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF
      ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF ASFASDFASDFASDF</div> 
        <div class="modal-footer">ASDFASDFASDFASDF</div> 
    </div> 
</div>

And my CSS

/* CSS used here will be applied after bootstrap.css */

.modal{
 display: block !important;
}
.modal-dialog{
  overflow-y: initial !important
}
.modal-body{
  height: 250px;
  overflow-y: auto;
}

http://www.bootply.com/T0yF2ZNTUd

+3


source to share


1 answer


You need to determine if it has reached the modal-body

bottom on scrolling modal-body

, so change window

to modal-body

as shown below:

$('.modal-body').scroll(function() {
  if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
       alert('reached bottom');
  }
});


Download here

+3


source






More articles:


All Articles