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 } ?>
In your JavaScript, you did not change the value of start and limit. Therefore you are always sending the same start and limit to your server.
To change it, you can recalculate the values of start and limit after you get the result back from server and after updating the DOM (after eval):
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)
/* HERE */
start = limit;
limit = start + 10;
}
)
//</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);
}
});