Javascript and Ajax Load more on page scroll: not loading more on smart phones running android or ios

try this :

        var page_num = 1;
        var loading  = false;

        load_more_contents(page_num);

        var checkPosition = function() {
            if($(window).scrollTop() + $(window).height() >= $(document).height()) {
                page_num++;
                load_more_contents(page_num);
            }
        };

        $(window).scroll( checkPosition);
        $(document).addEventListener("touchmove", checkPosition, false);

        function load_more_contents(page_num){
            if(loading == false){
                loading = true;
                $('.loading-info').show();
                $.post('load_more_videos.php', {'page': track_page}, function(data){
                    loading = false;
                    if(data.trim().length == 0)
                    {
                        $('.loading-info').html('<p> End of records</p>');
                        return;
                    }
                    $('.loading-info').hide();

                    $("#results").append(data);
                }).fail(function(xhr, ajaxOptions, thrownError) {
                    alert(thrownError);
                })
            }
        }

Select allOpen in new window

Thanks so much @leakim971 for taking the time to help. however, this solution doesn't load the data from database.

Where to test it?

greetings Archangel Macsika , , , I tried to understand what your javascript code does, and figure what is does, and for narrow screen widths what it does not do.

a phone page can be many many times more "height compared to width" than a tablet or computer view, So I thought there should be so detection of the "SCROLL POSITION" for the different width to height ratios for cell deisplay, but there is not, you only do a single test in the window scroll as -
      if( $(window).scrollTop() + $(window).height() >= $(document).height() )

so as far as I can tell the -
    load_more_contents(page_num);
is only used ONCE, the only time that the scroll position goes beyond the total document height.

I do not understand this, because you seem to be increasing a page number with -
      page_num++;
as if there are different output from the PHP depending on the page_num ? ? but in the AJAX -
       load_more_contents(page_num)
the  page_num parameter is never used, instead you use a  track_page variable in the AJAX data section as -
     {'page': track_page}

BUT the track_page variable is undefined in the JS you show? ?

So, I will ask you, what are the code operations you expect to have when the page is scrolled in the $(window).scroll  method,  with this scroll position test -
     if( $(window).scrollTop() + $(window).height() >= $(document).height() )

I do not see any narrow phone screen adjustments for a muti refresh of the id="results" for a tall page scroll using the -
   $("#results").append(data);

@Slick812 I'm sorry about the error on the ajax. That was supposed to be {'page': page_num} not {'page': track_page}. The way it works is that it checks if the pagenum is set as one then the ajax sends this number to the PHP page where results from page_num to a specified limit is indicated on the PHP. Then when I scroll it increments to two meaning second page. It uses same logic as pagination but on page scroll. Also, it works perfectly on desktops and laptops. For mobile, it prints only the first page of results and doesn't print anymore on page scroll... That's the problem I'm currently facing.

OK, you say - "It uses same logic as pagination", , but I can not see that in the Scroll event, this is all that you have for the if Test of scroll position -
          if($(window).scrollTop() + $(window).height() >= $(document).height()) {

you use the   $(window).scrollTop()  which will change with scrolling and return the scroll position , and also you have the   $(window).height()   which usually does not change with scrolling, but should change if device goes from portrait to landscape. The $(document).height() does not change with scrolling, but should change with each added content from the    $("#results").append(data);

so this - to me - will seem to work only if you are changing the content with    $("#results").append(data);   with HTML that will increase the   $(document).height()  an amount equal or close to the return from $(window).height(), as a "pagination" is suppose to do, , however in phones the $(window).height() return will be different than the laptop $(window).height() , , but it seems important for pagination that the increase in the document height from a  $("#results").append(data)    be in the range of the   $(window).height(), or in a narrow phone the IF TEST u use for scrolling may fail to work correctly.

You may can use an if test logic, that adds the changes in $(document).height() when the $("#results").append(data) is used, so the height of the window is NOT used except for the first test, and then the increase of document height is used for the if test as the document height increases.

@Slick812 Thanks. But could you by any chance offer a solution in form of a code cos at this point I'm kinda confuse.

Thank you so much @Rob Jurd, EE MVE. You just saved my a$$. Won't forget this. This is the best solution.

Thanks to all contributors.

HAHHAHA that's the best feedback.  Glad it's working for you :)