How to load more data on scrolling

Question

I have a container like this:

<div class="row row-sm padder-lg ">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
...
</div></div>

The content is generated by this loop on a php page:

       <?php 
        foreach ($top->feed->entry as $key => $value) 
        {
            $value->title->label = str_ireplace( "- ".$value->artist->label, "",  $value->title->label);
            if($key >= $this->config->item("items_top"))
                return false;
            $image = $value->image[2]->label;
            if($image == '')
                $image = base_url()."assets/images/no-cover.png";
            $image = str_ireplace("170x170", "200x200", $image);
        ?>

"items_top" is the number of array for max. images to display, how could I make a load more on scrolling? So when user scroll at the bottom of the page are automatically loaded new contents

UPDATE

Ok I need to use Ajax but how to do? Is it correct to use this code in my php?

    <script>
        $(document).scroll(function(e){
            // grab the scroll amount and the window height
            var scrollAmount = $(window).scrollTop();
            var documentHeight = $(document).height();
            // calculate the percentage the user has scrolled down the page
            var scrollPercent = (scrollAmount / documentHeight) * 100;
            if(scrollPercent > 50) {
                // run a function called doSomething
               doSomething();
            }
            function doSomething() {
                // do something when a user gets 50% of the way down my page
            }
        });
</script>

It seems you want to use some AJAX functions around this process. Are you aware of these functions ? — Anwar, Jan 27 '15 at 10:53
@Zeratops Yes I need Ajax but I never used it. Could you please help me on the script I post it here, at the bottom of my question? Thanks — NineCattoRules, Jan 27 '15 at 16:37

score 2 · Accepted Answer · edited May 23 '17 at 10:33

2

Short answer: You can't, at least not with PHP.

Since PHP is processed on the server side before the page is given to the client, there is no way to edit a page with PHP after it is received. That is the job of JavaScript or rather AJAX.

If you move your PHP script onto a separate page (php only preferably) that you include in your website, you can make an AJAX call to replace a part of the HTML code with the content returned by the script after the user scrolls.

This link might help you with that: Loading DIV content via ajax as HTML

edited May 23 '17 at 10:33

Community

1
1

answered Jan 27 '15 at 11:01

user1842665

61
3

I added a script on my question, is it a possible way? How could I develop it? – NineCattoRules Jan 27 '15 at 14:14

How to load more data on scrolling

1 Answers1