seems you trying to test use ajax ..
in index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$.ajax({
type: "get", // you may no need this line because ajax is set type get by default
url: "returneye.php",
success: function (data) {
alert(data);
$('#valueeye').html(data);
}
});
});
</script>
<div id="valueeye"></div>
in returneye.php
<?php
for ($i = 0; $i <= 20; $i++)
{
echo $i;
}
?>
Note be sure your index.php and returneye.php in the same path
This code output
01234567891011121314151617181920
Finally The working code is
$(document).ready(function(){
// run a function to get new content onload
getnewContent(0);
// window scroll event
$(window).on('scroll' , function(){
var windowscrollTop = $(this).scrollTop(); // window scrollTop
var windowHeight = $(this).height(); // window height
var documentHeight = $(document).outerHeight(true); // document height
// if scroll reach to the bottom
if(windowscrollTop == documentHeight - windowHeight){
// get last element
var lastElement = getlastelementdataattr();
alert(lastElement);
// run function to append new content and pass the last element
getnewContent(lastElement);
}
});
});
// function to get new content (in your case you will get this from ajax so each div you create in php should have data-getContent attribute )
function getnewContent(lastNum){
for(var i = lastNum ; i <= lastNum + 30 ; i++){
$('#showContent').append('<div class="" data-getContent="'+i+'">Content '+i+'</div>');
}
// your ajax should be like this
/*
$.ajax({
type: "post", // use post method here
url: "returneye.php",
data : {lastElement : lastNum},
success: function (data) {
alert(data);
$('#valueeye').html(data);
}
});
// and in php get lastnum with
<?php
if(isset($_POST['lastElement'])){ // from data : {lastElement : lastNum}, in js
echo (data);
// then get the data from data base here
}
?>
*/
}
// function to get the last element number from #showContent in my html above .. change #showContent with your div id or class you append the data inside it
function getlastelementdataattr(){
return parseInt($('#showContent div:last').attr('data-getContent'), 10);
}
Working Demo
