JavaScript:
$.ajax({
type: 'POST',
url: 'getcontent.php',
data: 'lastid=' + 0,
dataType: "html",
success: function (data) {
console.log(data);
$("#content").append(data);
}
});
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
var last_id = $(".entries:last").attr("id");
loadMoreData(last_id);
}
});
function loadMoreData(last_id) {
$.ajax({
type: 'POST',
url: 'getcontent.php',
data: 'lastid=' + last_id,
dataType: "html",
success: function (data) {
console.log(data);
$("#content").append(data);
}
});
}
PHP:
<?php
include_once("Medoo.php");
use Medoo\Medoo;
$database = new Medoo([
'database_type' => 'sqlite',
'database_file' => 'db.db'
]);
$lastid = $_POST['lastid'];
//$lastid = 10;
$lastid += 1;
$html = "";
$content = $database->select("entries", ["id", "entry"], ["id[<>]" => [$lastid, $lastid + 9]]);
for ($i = 0; $i < count($content); $i++) {
$html .= "<p class='entries' id='" . $content[$i]["id"] . "'>" . $content[$i]["entry"] . "</p>";
}
echo $html;
?>
HTML:
<html>
<head>
<style>
p {
width: 200px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="content"></div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="getcontent.js"></script>
</body>
</html>
The issue I'm facing is with the infinite scroll functionality. Instead of loading only one block of data, jQuery loads all entries when scrolled down. However, I suspect that this line might be causing the problem:
$(window).scrollTop() >= $(document).height() - $(window).height() - 10
I have tried various solutions from tutorials and fiddles, but none seem to work effectively. The PHP file seems to be returning the expected 10 objects from the database.