jQuery load more data on scroll not loading more data

Question

I am working on a jQuery load more data scroll, which when I click on category link it will sort the data based on that category I click, which is working well. It only load first six how can I fix this issue.

index.php
<a href="index.php?where=category1">Category</a>

<div class="container"> 
        <div class="row" id="results"></div>    
        <div id="loader_image" align="center">
            <img src="loader.gif" alt="" width="50"> 
        </div>
        <div id="loader_message" align="center"></div>          
</div>


<script type="text/javascript">
    //For The Scroll
    var busy = false;
    var limit = 6
    var offset = 0;
    var where = '<?php if(isset($_GET["where"])) {echo $_GET['where'];} else {echo ' ';} ?>';

    function displayRecords(lim, off, where) {
        $.ajax({
          type: "GET",
          async: false,
          url: "<?php echo(link);?>getrecords.php",
          data: "limit=" + lim + "&offset=" + off + "&where=" + where,
          cache: false,
          beforeSend: function() {
            $("#loader_message").html("").hide();
            $('#loader_image').show();
          },
          success: function(html) {
            $("#results").append(html);
            $('#loader_image').hide();
            if (html == "") {
              $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
            } else {
              // $("#loader_message").html('<button class="btn btn-default" type="button">Loading please wait...</button>').show();
              $('#loader_image').show();

            }
            window.busy = false;
          }
        });
    }

    $(document).ready(function() {
        // start to load the first set of data
        if (busy == false) {
          busy = true;
          // start to load the first set of data
          displayRecords(limit, offset, where);
        }


        $(window).scroll(function() {
          // make sure u give the container id of the data to be loaded in.
          if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
            busy = true;
            offset = limit + offset;
            where = '<?php if(isset($_GET["where"])) {echo $_GET['where'];} else {echo ' ';} ?>';

            // this is optional just to delay the loading of data
            setTimeout(function() { displayRecords(limit, offset, where); }, 500);

            // you can remove the above code and can use directly this function
            // displayRecords(limit, offset);

          }
        });
      });
</script>




getrecords.php

$where = '';
    if(isset($_GET['where'])){
        $search = str_replace('-',' ', $_GET['where']);
        $where .= "WHERE category LIKE '%$search%'";
    }

$limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 6;
$offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;

$sql = "SELECT * FROM users {$where} ORDER BY id ASC LIMIT $limit OFFSET $offset";
try {
      $stmt = $user->runQuery($sql);
      $stmt->execute();
      $results = $stmt->fetchAll();
} catch (Exception $ex) {
    echo $ex->getMessage();
}
if (count($results) > 0) {
  foreach ($results as $res) {
?>

        <div class="col-sm-4 my-4 text-center">
              <div class="card">
                  <img class="rounded-circle img-fluid d-block mx-auto" src="http://placehold.it/200x200">
                  <h3><?php echo ucwords($res['name']); ?></h3>

                  <small><?php echo $res['category']; ?></small>
              </div>
        </div>

<?php   
  }
}
?>  

see below preview it image of the issue

Answer 1

If the loading icon is never removed check the console for any errors. You're setting the loading icon to be shown in the beforeSend function but have no error property in the ajax handler.

Remove $("#results").append(html); from the top of your success: function(html) { .. } and move it into the else portion of your if statement. You do this so you're not attempting to append an empty string, or an unwanted string, for no reason and we have finer control over it via our if/else logic.

You'll also want to remove $('#loader_image').show() from the else statement. You're re-showing it even though the ajax call has been processed successfully.

See the cleaned up success function below.

success: function(html) {
  $('#loader_image').hide();
  if (html == "") {
    $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
  } else {
    $("#results").append(html);    
  }
  window.busy = false;
}

New ajax call:

$.ajax({
  type: "GET",
  async: false,
  url: "<?php echo(link);?>getrecords.php",
  data: "limit=" + lim + "&offset=" + off + "&where=" + where,
  cache: false,
  beforeSend: function() {
    $("#loader_message").html("").hide();
    $('#loader_image').show();
  },
  success: function(html) {
    $('#loader_image').hide();
    if (html == "") {
      $("#loader_message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
    } else {
       $('#results').append(html);
    }
    window.busy = false;
  },
  error: function(error) {
    console.log(error);
    $('#loader_image').hide();
    $('#loader_message').html('There was an error processing your request.').show();
  }
});