Infinite scroll by just scrolling down the page

Question

The below script is for data that gets fired for every click, but i want the data that get fired when the user scrolls down the page CODE:

            $(document).ready(function(){
            $(document).on("click",'.getmore', function( event ){
                var last_id = $(this).attr('id');   
                $.ajax({
                    type: 'POST',
                    url : 'http://localhost/tech1/services/getmore.php',    
                    data: 'last_id='+last_id,
                    beforeSend: function(){
                        $('.getmore').html('<img src="../images/loader.gif" alt="Loading..." />');  
                    },
                    success: function(data){
                        $('.getmore').remove();
                        $('#comments').append(data);
                    }
                });
            }); 
        });

Edit-Available code:

function infiniteAjaxCall(getmore){  //<---pass id in the param
   $.ajax({
    type: 'POST',
    url: 'http://localhost/tech1/services/getmore.php',
    data: 'last_id=' + getmore})  //<-----and use it here


     $(document).ready(function () 
     {
 $(document).ready(function () {
     $(document).on("click", '.getmore', function (event) {
       var last_id = $(this).attr('id');
       infiniteAjaxCall(last_id);
        });

      $(window).on('scroll', function()
         {
         if($(document).scrollTop() == $(document).height() - $(window).height())
  {
          $('.getmore').click();
  }
       });
           })} )}

here is the available code but couldn't fix the issue.

Answer 1

You can try adding this:

 $(document).ready(function () {
   $(document).on("click", '.getmore', function (event) {
     var last_id = $(this).attr('id');
     $.ajax({
        type: 'POST',
        url: 'http://localhost/tech1/services/getmore.php',
        data: 'last_id=' + last_id,
        beforeSend: function () {
            $('.getmore').html('<img src="../images/loader.gif" alt="Loading..." />');
        },
        success: function (data) {
            $('.getmore').remove();
            $('#comments').append(data);
        }
    });
  });

  $(window).on('scroll', function(){
      if($(document).scrollTop() == $(document).height() - $(window).height()){
          $('.getmore').click();   //^^^^^^^^update the if condition^^^^^^^^---
      }
  });

});

Another way i can suggest is this:

make a global function :

function infiniteAjaxCall(id){  //<---pass id in the param
       $.ajax({
        type: 'POST',
        url: 'http://localhost/tech1/services/getmore.php',
        data: 'last_id=' + id,  //<-----and use it here
}

then your button click:

 $(document).ready(function () {
   $(document).on("click", '.getmore', function (event) {
     var last_id = $(this).attr('id');
     infiniteAjaxCall(last_id);
  });

  $(window).on('scroll', function(){
      if($(document).scrollTop() == $(document).height() - $(window).height()){
          var last_id = $('.getmore').attr('id');
          infiniteAjaxCall(last_id);
          // or this
          // $('.getmore').click(); // you can try commenting out first two lines above.
      }
  });

});