Infinite scroll not working

JavaScript
1

Hey!!

Trying to get infinite scroll to work but having a time doing so. Here is the code:

HMTL

<div class="card-body">
    <div class="post-item" id="<?php echo $row['id']; ?>">
 <p class="post-filetoUpload"> <?php echo($_POST['fileToUpload']); ?>;
<p class="post-comment"> <?php echo($_POST['comment']); ?>;
<p class="post-page_url">  <?php echo($_POST['page_url']); ?>;
  <div class="form-floating">
  <textarea class="form-control" placeholder="Comment here" id="floatingTextarea"></textarea>
</div>      
    </div>
                <?php
                }
                ?>
            </div>
            <div class="ajax-loader text-center">
                <img src="LoaderIcon.gif"> Loading more posts...
            </div>
    </div>
     </div>
  </div>

JS

<script type="text/javascript">
$(document).ready(function(){
        windowOnScroll();
});
function windowOnScroll() {
       $(window).on("scroll", function(e){
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
            if($(".post-item").length < $("#total_count").val()) {
                var lastId = $(".post-item:last").attr("id");
                //getMoreData(lastId);
            }
        }
    });
}

function getMoreData(lastId) {
       $(window).off("scroll");
    $.ajax({
        url: 'getMoreData.php?lastId=' + lastId,
        type: "get",
        beforeSend: function ()
        {
            $('.ajax-loader').show();
        },
        success: function (data) {
        	   setTimeout(function() {
                $('.ajax-loader').hide();
            $("#post-list").append(data);
            windowOnScroll();
        	   }, 1000);
        }
   });
}
</script>

Thank ya for the help…its greatly appreciate it :blush:

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.