Please no jQuery advice.
This script is designed to show more records from the database if you scroll all the way to the bottom of inside a div call results-container.
The problem I am facing is the same data keeps showing. I notice that if you change the value of a variable call start I notice it will show different sections of data that is
in the users table I just got to find a way where I can change the start variable value constantly every time I make a request for more records to show so I can show different portions of records every time I trigger the
scrollTrigger function starting from the beginning of the database table to the end of the table. I tried many methods to constantly change the start variable value constantly to show different records by each request but I failed, so I removed all the code that wasn't working in the index.php so how can I do this?
index.php
<!DOCTYPE html>
<html>
<head>
<style>
#results-container {
background-color: red;
width: 350px;
height: 300px;
margin: auto;
overflow-y: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var start = 0; //<--The starting location, 0 means to start showing records at the beginning of the database table
var limit = 10;//<--Show 10 records every time you trigger the scrollTrigger function
getData();
//Scrolling to the bottom in the results-container shows more records
document.querySelector('#results-container').addEventListener('scroll',scrollTrigger);
function scrollTrigger(e){
var resultsContainer = e.currentTarget;
if (Math.ceil(resultsContainer.scrollTop) + resultsContainer.clientHeight >= resultsContainer.scrollHeight) {
getData();
}
}
//
function getData(){
var xhr= new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
document.getElementById('results-container').insertAdjacentHTML('beforeend', xhr.responseText);
//<Allow JS and remove previous appended JS of the requested page>
Array.prototype.forEach.call(
document.querySelectorAll('#results-container script'),
function(script){
script.parentNode.removeChild(script)
eval(script.innerHTML)
}
)
//</Allow JS and remove previous appended JS of the requested page>
}
}
var formData= new FormData();
formData.append('start',start);
formData.append('limit',limit);
xhr.open('POST','data.php')
xhr.send(formData);
}
});
</script>
</head>
<body>
<div id="results-container"></div>
</body>
</html>
data.php
<?php
$servername='localhost';
$username='JD';
$password='1234';
$db_name= 'test';
$connect = new mysqli($servername,$username,$password,$db_name);
$start = $connect->real_escape_string($_POST['start']);
$limit = $connect->real_escape_string($_POST['limit']);
$query = "SELECT*FROM users LIMIT $start, $limit";
$result= $connect->query($query);
?>
<style>
#number{
background-color: gold;
color: black;
border-radius: 100%;
padding: 5px;
}
h2{
display: inline-block;
}
</style>
<?php while($row = $result->fetch_assoc()) { ?>
<h2 id='number' ><?php echo $row['user_id']; ?></h2>
<h2><?php echo $row['username']; ?></h2>
<p><?php echo $row['password']; ?></p>
<?php } ?>
