Привет.
Столкнулся с необходимостью выводить контент через ajax, плавно подгружая блоки в посадочной странице. Думал проверять размеры контента, и если скролл приближается к концу, то выводить через ajax запрос.
Сделал все через такой код:
$(document).ready(function() {
var getHeightContent; sectionNumber = 0; loadPageAjax(sectionNumber); //загружаем первую часть
function loadPageAjax(getSectionNumbers) {
$.ajax({
url: "load.php",
type: "POST",
data: {getSectionNumbers: getSectionNumbers},
onSubmit: function ajaxViewsLoader() {
// пошел прелоадер,
},
success: function ajaxViewsSection(data) {
// Здесь мы получаем данные, отправленные сервером и выводим
$("#lazyLoadContent").append(data);
sectionNumber++;
console.log(getHeightContent);
}
});
getHeightContent = $("#lazyLoadContent").outerHeight();
};
$(window).scroll(function() {
if ($(this).scrollTop() >= getHeightContent - 5) {
loadPageAjax(sectionNumber);
};
});
});
В php просто массив и вывод:
$arraySelects = array(
0=>"
<section id='content-item-1' style='marging-bottom: 100px;'>
LINE #0: Просто какой-то текст? тест.<br/><br/>
</section>",
1=>"
<section id='content-item-1' style='marging-bottom: 100px;'>
LINE #1: Просто какой-то текст? тест.<br/>
LINE #1: Просто какой-то текст? тест.<br/>
</section>",
2=>"
<section id='content-item-2' style='marging-bottom: 100px;'>
LINE #2: Просто какой-то текст? тест.<br/>
</section>"
);
if(isset($_POST['getSectionNumbers'])){
$getSectionNumber = $_POST['getSectionNumbers']; //сохраняем значение
echo "$arraySelects[$getSectionNumber]";
}
Выводит только первые два элемента массива, ошибок в консоли нет. В чем может быть проблема? Правильно ли я делаю? Есть ли уже рабочий велосипед?