Dynamic load of content elements (post, articles etc) by ajax in endless scrolling
html:
<div class="content">
<div class="element"></div>
<div class="element"></div>
...
</div>
js
//useful to get GET-parameters from url, which may be used in sql WHERE
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
if (decodeURIComponent(pair[0]) == variable) {
return decodeURIComponent(pair[1]);
}
}
}
//elements counter, used in sql LIMIT operator on backend
var more = 10;
//send query to backend when we scrolled down to end of page
$(window).on("scroll", function() {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
$.post( "/response.php", {more: more, search: getQueryVariable("search")}, function( data ) {
if(data) {
$(".content").append(data);
more += 10;
}
});
}
});
In this example we got prepared formatted content from backend.