Hey.

Faced with the need to display content via ajax, smoothly loading blocks in the landing page. I thought to check the dimensions of the content, and if the scroll is nearing the end, then output the request via ajax.

Made everything through such code:

$(document).ready(function() {

var getHeightContent; sectionNumber = 0; loadPageAjax (sectionNumber); // load the first part

 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); }; }); });

In php, just an array and output:

 $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]"; }

Displays only the first two elements of the array, no errors in the console. What could be the problem? Am I doing the right thing? Do you already have a working bike?

    2 answers 2

     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(); } $(document).ready(function() { var getHeightContent = 0;sectionNumber = 0; loadPageAjax(sectionNumber); $(window).scroll(function() { console.log(getHeightContent) if ($(this).scrollTop() >= getHeightContent - 5) { loadPageAjax(sectionNumber); }; }); });

    in load.php:

     0=>"<section id='content-item-0' style='marging-bottom: 100px;'>

    You now have "content-item-1"

    • Yes, indeed, the error was solved. Accept my thanks. - XeL077

    Option as scrolling smoothly open html channel? ) And no ajax. ))

    • No, I just know how to make a conclusion through the plugin, but you need to load it for the page loading speed. - XeL077