CODEWITHSUNDEEP
javascriptphpjqueryajax
Masterism88
Masterism88

Reputation: 11

PHP infinite scrolling not loading more posts

I'm trying to get this infinite scroll to work. I am not good with php, or javascript which isn't helping me.

It'll load the first 20 posts but for whatever reason I keep getting an error stating "No more posts available" when I go to scroll down to load more posts.

Here is: index.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
<div class="container-fluid no-gutter">
  <nav class="navbar navbar-dark bg-dark">
    <div class="container">
      <h1 class="navbar-brand">Posts</h1>
    </div>
  </nav>
  <div class="container padding">
    <div class="row">
      <div class="col-3">

      </div>
      <div class="main col-9" id="post-list">
        <input type="hidden" name="total_count" id="total_count" value="<?php echo $total; ?>" />
        <?php
          include ("config/config.php");
          
            try {
              $conn = new PDO("mysql:host=$dbh;dbname=$dbn", $dbu, $dbp);
              $sql = "SELECT address, FROM_UNIXTIME(date/1000,'%M %D, %Y %h:%i:%s') as date, body FROM table_name";
              $total = $conn->query($sql)->rowCount();
              $sql = "SELECT row, address, FROM_UNIXTIME(date/1000, '%M %D, %Y %h:%i %p')as date, body FROM table_name LIMIT 20";

              foreach($conn->query($sql) as $row) {
                echo '<div class= "home">'; 
                echo '<div class= "address">' . $row["address"] . '</div>';
                echo '<div class= "body">' . $row["body"] . '</div>';
                echo '<div class= "date">' . $row["date"] . '</div>';
                echo '</div>';
              }
            }
            catch(PDOException $e) {
              echo "Error: " . $e->getMessage();
            }
            $conn = null;
        ?>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
        windowOnScroll();
        $("div.address:contains(Var)").parent().removeClass("home");
                $("div.address:contains(Var)").parent().addClass("away");
});
function windowOnScroll() {
       $(window).on("scroll", function(e){
        if ($(window).scrollTop() == $(document).height() - $(window).height()){
           console.log('Scrolling')
            if($(".home").length < $("#total_count").val()) {
                var lastId = $(".home:last").attr("id");
                getMoreData(lastId);
            }
            else{
                console.log('No More posts aviliable')
            }
        }
    });
}

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();
               }, 10);
        }
   });
}
</script>
</body>
</html>

getMoreData.php

<?php
    include ("config/config.php");

    $conn = new PDO("mysql:host=$dbh;dbname=$dbn", $dbu, $dbp);
    $lastId = $_GET['lastId'];
    $sql = "SELECT row, address, FROM_UNIXTIME(date/1000, '%M %D, %Y %h:%i %p')as date, body FROM table_name WHERE `row` < '" .$lastId . "' LIMIT 20";

    foreach($conn->query($sql) as $row) {
      echo '<div class="home">'; 
      echo '<div class= "address">' . $row["address"] . '</div>';
      echo '<div class= "body">' . $row["body"] . '</div>';
      echo '<div class= "date">' . $row["date"] . '</div>';
      echo '</div>';
    }

?>

I've spent a couple days trying to get this to work with various results.

Please help! lol...

Upvotes: 0

Views: 533

Answers (1)

Mohammed Azar
Mohammed Azar

Reputation: 101

Try placing <input type="hidden" id="total_count" value="<?php echo $total?>"> after the PHP code. Because $total is not initialized yet.

Upvotes: 2

Related Questions