How to run ajax only when the scroll reaches the bottom of the page not before and take some seconds to refresh the page?

386
February 21, 2017, at 11:45 PM

hey guys i am trying to load the data from my database on ajax scroll but the problem is that when ajax scroll tries to go to the bottom all the data is shown and ajax keep running. how can i stop the ajax load until the user reaches the bottom and add a gif image for loading here is my code

<script type="text/javascript">

$(document).ready(function(){ $(window).bind('scroll load',function(){

      var lastID = $('.load-more').attr('lastID');
      if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && lastID != 0){
         $(window).unbind('load');
          $('#loading').html('<img src="ajax-loader.gif"> loading...');
          jQuery.ajax({
              type:'POST',
              url:'<?php echo base_url("user/get_all_post"); ?>',
               data: "id=" + lastID,
                  dataType: 'json', 

              beforeSend:function(data){
                  $('.load-more').show();
              },
              success:function(data){
                     var ParsedObject = JSON.stringify(data);            
                     var json = $.parseJSON(ParsedObject);
                      $PostId=json[4]['id'];

                      for(i=0;i<5;i++ )
                    {
                          var post_status = json[i]['status'];
                          var status_image = json[i]['status_image'];
                          var multimage = json[i]['multimage'];
                          //           alert($status_image);               
                          if(post_status==""){

                          }else{
                           $("#status_data").append('<div style=" margin: 20px 50px 0px 40px; class="col-md-6"><a><?php echo img($user_image); ?></a><a><?php echo $uname; ?></a><div>'+post_status+'</div></div>');
                         }
                         if (status_image=="") {
                         }else{
                           $("#status_data").append('<div style=" margin: 20px 50px 0px 40px; class="col-md-6" "><a><?php echo img($user_image); ?></a><a><?php echo $uname; ?></a><div><img style="height:100px; width:100px;" src="<?php echo base_url('uploads'); ?>/'+status_image+'"></div></div>');
                         }
                         if (multimage=="") {
                         }
                          else{
                           $("#status_data").append('<div style=" margin: 20px 50px 0px 40px;  "><a><?php echo img($user_image); ?></a><a><?php echo $uname; ?></a><div><img style="height:100px; width:100px;" src="<?php echo base_url('uploads'); ?>/'+multimage+'"></div></div>');
                          }
                   }
          $('.load-more').attr('lastID', $PostId);
                }
          });
      }
  });

});

now at the top where this

if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && lastID != 0){
         $(window).unbind('load');

is running i know the trouble is here but i can't find it can you tell me what can i do?

Rent Charter Buses Company
READ ALSO
Date comparison in MVC4

Date comparison in MVC4

Here my requirement is to provide the issued date and expiry date in an applicationHere Issued date shouldn't be lesser than Expiry date

378
why window.onload not fire in IE

why window.onload not fire in IE

I have some code to open a popup, then resize the it via certain element on the popup pageThe following code work fine in Chrome and Firefox, but not IE

464
Restrict ajax calls from outside of node app

Restrict ajax calls from outside of node app

I want to restrict AJAX calls other than my applicationI don't want my AJAX request to send response when called from outside my application, even when the url of AJAX call is copied and pasted in browser

330
How order table after selected option

How order table after selected option

I have URL API and i did group by "date"

420