I’m working on loading options using ajax
I need to detect scrollTop when scrolling the options to call ajax to load more data
I’ve searched a lot about scrollTop() for options but I’ve found that the options doesn’t support detecting scrollTop();
how to fix please
her is my code :
<html>
<head>
<title>Webslesson Tutorial | Auto Load More Data on Page Scroll with Jquery & PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<select id="load_data"></select>
</div>
</body>
</html>
<script>
$(document).ready(function() {
var limit = 50;
var start = 0;
var action = 'inactive';
function load_country_data(limit, start) {
$.ajax({
url: "fetch.php",
method: "POST",
data: {
limit: limit,
start: start
},
cache: false,
success: function(data) {
$('#load_data').append(data);
if (data == '') {
$('#load_data_message').html("<button type='button' class='btn btn-info'>No Data Found</button>");
action = 'active';
} else {
$('#load_data_message').html("<button type='button' class='btn btn-warning'>Please Wait....</button>");
action = "inactive";
}
}
});
}
if (action == 'inactive') {
action = 'active';
load_country_data(limit, start);
}
$(window).scroll(function() {
console.log($('#load_data').scrollTop());
console.log($('#load_data').height());
if ($(window).scrollTop() + $('#load_data').height() > $("#load_data").height() && action == 'inactive') {
action = 'active';
start = start + limit;
setTimeout(function() {
load_country_data(limit, start);
}, 1000);
}
});
});
</script>
and here is the code of fetch.php:
<?php
if (isset($_POST["limit"], $_POST["start"])) {
for ($i = $_POST["start"]; $i < $_POST["start"] + $_POST["limit"]; $i++) {
echo '<option>item ' . $i . '</option>';
}
}