У меня есть код для загрузки большего количества контента по нажатию кнопки. И у меня есть другой для загрузки на свитке. Код для кнопки загружается нормально. Код для прокрутки дублирует новый загруженный контент, как 3 раза. Оба кода используют один и тот же php файл загрузки. Все они перечислены ниже. Что не так с кодом прокрутки? Вся помощь приветствуется. К вашему сведению, я не заинтересован в Jquery бесконечной прокрутке или любом другом плагине. Спасибо!
ЗАГРУЗИТЬ НА ЩЕЛЧОК С КНОПКОЙ
<!DOCTYPE html>
<html>
<head>
<title>Load More Button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div>
<h2 align="center">Load More Button</h2>
<div style="height:10px;"></div>
<div id="load-content">
<?php
$lastid = '';
include('connection.php');
$query = mysqli_query($connection, "select * from transactions order by id asc limit 5");
while ($row = mysqli_fetch_array($query)) {
?>
<div>
<div>
<?php echo $row['id']; ?>
<br>
<?php echo $row['description']; ?>
<br>
<?php echo $row['promorefnum']; ?>
<br><br>
</div>
</div>
<?php
$lastid = $row['id'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div>
<div>
<div id="load-more" data-id="<?php echo $lastid; ?>">Load More</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(document).on('click', '#load-more', function() {
var lastid = $(this).data('id');
$('#load-more').html('Loading...');
$.ajax({
url: "load-data.php",
method: "POST",
data: {
lastid: lastid,
},
success: function(data) {
if (data != '') {
$('#remove').remove();
$('#load-content').append(data);
} else {
$('#load-more').html('End Of Data');
}
}
});
});
});
</script>
</body>
</html>
ЗАГРУЗИТЬ БОЛЬШЕ НА СВИТОК
<!DOCTYPE html>
<html>
<head>
<title>Load More Scroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div>
<h2 align="center">Load More Scroll</h2>
<div style="height:10px;"></div>
<div id="load-content">
<?php
$lastid = '';
include('connection.php');
$query = mysqli_query($connection, "select * from transactions order by id asc limit 11");
while ($row = mysqli_fetch_array($query)) {
?>
<div>
<div>
<?php echo $row['id']; ?>
<br>
<?php echo $row['description']; ?>
<br>
<?php echo $row['promorefnum']; ?>
<br><br>
</div>
</div>
<?php
$lastid = $row['id'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div>
<div>
<div id="load-more" data-id="<?php echo $lastid; ?>"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
window.onscroll = function() {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2) {
var lastid = $('#load-more').data('id');
$('#load-more').html('Loading...');
$.ajax({
url: "load-data.php",
method: "POST",
data: {
lastid: lastid,
},
success: function(data) {
if (data != '') {
$('#remove').remove();
$('#load-content').append(data);
} else {
$('#load-more').html('End Of Data');
}
}
});
}
}
});
</script>
</body>
</html>
PHP КОД / НАГРУЗИТЬ ФАЙЛ
<?php
sleep(1);
include('connection.php');
if (isset($_POST['lastid'])) {
$lastid = $_POST['lastid'];
$query = mysqli_query($connection, "select * from transactions where id > '$lastid' order by id asc limit 10");
if (mysqli_num_rows($query) > 0) {
while ($row = mysqli_fetch_array($query)) {
?>
<div>
<?php echo $row['id']; ?>
<br>
<?php echo $row['description']; ?>
<br>
<?php echo $row['promorefnum']; ?>
<br><br>
</div>
<?php
$lastid = $row['id'];
}
?>
<div id="remove">
<div style="height:10px;"></div>
<div>
<div>
<div id="load-more" data-id="<?php echo $lastid; ?>">Load More</div>
</div>
</div>
</div>
<?php
}
}
?>