Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load data on scroll down for bootstrap Model (Lazy Load) [closed]

I have bootstrap modal that have scrolling. I want to load data from AJAX call when scroll hit modal bottom (Not Page Bottom). I am using this jQuery code but its not working for this bootstrap modal.

$(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 is

/* 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

like image 244
Muzafar Khan Avatar asked Nov 19 '25 13:11

Muzafar Khan


1 Answers

You need to identify whether modal-body has reached bottom as you are scrolling modal-body so change window to modal-body as below:

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

Bootply here

like image 57
Guruprasad J Rao Avatar answered Nov 22 '25 04:11

Guruprasad J Rao