Hi there,

I've been hitting nothing but brick walls trying to implement the use of infinite scroll on one of my sites.

Most of the examples I have found online are done by loading static html pages...
In this style:

Code: Select all

<script>
        $(document).ready(function () {
            $('#marker-end')
                .on('lazyshow', function () {
                    $.ajax({
                            url: 'infinite.htm',
                            dataType: "html"
                        })
                        .done(function (responseText) {
                            // add new elements
                            $('#infinite').append(
                                $('<div>')
                                    .append($.parseHTML(responseText))
                                    .find('#infinite')
                                    .children()
                            );
                            // process added elements
                            $(window).lazyLoadXT();
                            $('#marker-end').lazyLoadXT({visibleOnly: false, checkDuplicates: false});
                        });
                })
                .lazyLoadXT({visibleOnly: false});
        });
    </script>

The closest to what I believe might work for Couch is something like the following:

Code: Select all

<?php
include('config.php');
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT * FROM actor_info ORDER BY id DESC";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
  $next = ++$page;
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
  header('HTTP/1.0 404 Not Found');
  echo 'Page not found!';
  exit();
}
?>

I'm pretty sure I should be using the <cms:gpc 'my_parameter' /> tag, but can't seem to wrap my head around it...

my question is can this be done with a dynamic cms like Couch? If so, Any pointers would totally be appreciated. Thanks!

p.s. am patiently waiting the new Couch release with possible easier to use member support. That's going to be a game changer!

[cheesypoof]

Hi @izzy,

Did you see the members module announcement (viewtopic.php?f=5&t=8063)?

You are using https://github.com/ressio/lazy-load-xt correct? If so, then I don't think this should be too much more work. We shouldn't need to resort to custom PHP or SQL either.

Whereas in that example you have a static URL (infinite.htm) which always contains the same items, we want to retrieve new content with each request. I think the easiest way to do this is to use pagination - add limit and paginate parameters to your pages tag. We must also save a few variables for use later in the page by the JavaScript. We save the current page, the total number of pages, and the page being paginated.

Code: Select all

<cms:pages limit='2' paginate='1'>
    <cms:if k_paginated_top>
        <cms:set current_page=k_current_page scope='global'/>
        <cms:set page_being_paginated="<cms:add_querystring k_page_being_paginated 'pg='/>" scope='global'/>
        <cms:set total_pages=k_total_pages scope='global'/>
    </cms:if>

    <!-- your items -->
</cms:pages>

...

<script>
var currentPage = <cms:show current_page/>,
    pageBeingPaginated = '<cms:show page_being_paginated/>',
    totalPages = <cms:show total_pages/>;

$(function () {
    $('#marker-end').on('lazyshow', function () {
        if (currentPage === totalPages) {
            $(this).off('lazyshow');
        } else {
            $.ajax({
                dataType: 'html',
                url: pageBeingPaginated + ++currentPage
            }).done(function (response) {
                // add new elements
                $('#infinite').append(
                    $('<div>').append($.parseHTML(response)).find('#infinite').children()
                );

                // process added elements
                $(window).lazyLoadXT();
                $('#marker-end').lazyLoadXT({
                    checkDuplicates: false,
                    visibleOnly: false
                });
            });
        }
    }).lazyLoadXT({
        visibleOnly: false
    });
});
</script>

I'm in a bit of a rush at the moment and didn't have a chance to test this, so there may very well be some errors I haven't had time to address. I'll be sure to take a look at this tomorrow, so let me know if you have any questions about what I have posted.

Sweet! Will give the code a go in a bit, report back and post my final working example code.

I have no idea how I missed the module announcement, I jump into the forums a little every day!
I'm stoked to see that it's been released.

cheesypoof (and, of course kk), you flippin' rock!
Thanks again!

Hi, I want to implement this infinite scrolling feature on my index.php page where I'm displaying the list of posts from my blog.php page. I have tried the method mentioned adn it doesn't seem to be working for me.
How can i go about doing this ? Thanks.