Yii 1.1: yiinfinite-scroll

Creates an Infinite Scroll Pagination, like in Twitter
105 followers

This extension uses the infinite scroll jQuery plugin, from http://www.infinite-scroll.com/ to create an infinite scrolling pagination, like in twitter. This kind of pagination is also called Endless Scroll.

It uses javascript to load and parse the new pages, but gracefully degrade in cases where javascript is disabled and the users will still be able to access all the pages.

Requirements

Yii 1.1.4

Usage

The YiinfiniteScroller class extends the CBasePager class, so you will use it the same way as CLinkPager and CListPager.

On your controller you need to create the CPagination class which controls the pages handling:

class PostController extends Controller
{
    public function actionIndex()
    {
            $criteria = new CDbCriteria;
            $total = Post::model()->count();
 
            $pages = new CPagination($total);
            $pages->pageSize = 20;
            $pages->applyLimit($criteria);
 
            $posts = Post::model()->findAll($criteria);
 
        $this->render('index', array(
                'posts' => $posts,
                'pages' => $pages,
            ));
    }
}

Now on your view you will use it as a widget, like in the following sample:

$this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
    'itemSelector' => 'div.post',
    'pages' => $pages,
));

Note that this will only output the necessary code to the pager. It will not render the page items. Since YiinfiniteScroller extends CBasePager, everything works exactly the same way as if you were using the CListPager or CLinkPager. So, you're need to manually render the items.

In this example, the items are stored in the $posts variable. In our view, we can render the posts by using a simple foreach loop, like in the example bellow:

<?php foreach($posts as $post): ?>
    <div class="post">
        <p>Autor: <?php echo $post->author; ?></p>
        <p><?php echo $post->text; ?></p>
    </div>
<?php endforeach; ?>

This is how the complete view file will look like:

<div id="posts">
<?php foreach($posts as $post): ?>
    <div class="post">
        <p>Autor: <?php echo $post->author; ?></p>
        <p><?php echo $post->text; ?></p>
    </div>
<?php endforeach; ?>
</div>
<?php $this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
    'contentSelector' => '#posts',
    'itemSelector' => 'div.post',
    'loadingText' => 'Loading...',
    'donetext' => 'This is the end... my only friend, the end',
    'pages' => $pages,
)); ?>

There are a few properties that can be set for YiinfiniteScroller:

  • contentSelector: The jQuery selector of the container element where the loaded items (from itemSelector) will be appended
  • loadingText: The text to be displayed and a new page is being loaded
  • donetext: The text to be displayed when all the pages had been loaded
  • pages: The CPagination object
  • errorHandler: Javascrit function that is called when the ajax errors or 404s.
  • navigationLinkText: The text to be displayed in the navigation link (Usually visible only when javascript is disabled). The default value is "next".

Changelog

  • Release 1.2 (11/11/2013)
    • Added the navigationLinkText property
    • Fixed problems when there were 0 or 1 pages to be paged

Resources

Total 20 comments

#16956 report it
Mohammed Sajin at 2014/04/16 06:38am
The autoload is not working in after Category sort using ajax

Hi All,

I have implemented the infinite scroller on my products page and is working fine. But after I sort my products by category which loads the results in AJAX. The infinite scroller is not working. Can any one help me on this. I have spent hours to sort out this problem. Is this a script conflict or the script is not loading. Im using renderPartial to load the sorted products and I have also set third and fourth parameter of the renderPartial as false,true.

#16428 report it
rei at 2014/02/22 01:48am
Re: Use with data provider
How can i use this with a data provider?

Did you intend to use it with CListView? If yes, please see here: http://www.yiiframework.com/forum/index.php/topic/33029-yiinfinite-scroll-and-afterajaxupdate/

Although there is problem with that, it could display data properly as far as I could see.

#16371 report it
inProcess at 2014/02/15 10:56pm
This is awesome!

Would you make an edition of this that doesn't use pagination but does load on scroll when going towards the bottom of the page and just adds more content with Ajax?

#15603 report it
jzhong05 at 2013/11/27 07:37pm
Use with data provider

Hi guys,

How can i use this with a data provider?

Thank you, jim

#14792 report it
sheraz.s at 2013/09/10 03:49am
Plugin not working in AJAX

Hi, Thanks for this amazing plugin. Plugin works fine in normal scenario but in ajax it is not working properly. I am scrolling the content manually. The problem is of URL.

After ajax update , the "More" button has a url for another ajax call to load more content. When i click on the "More" button, this request is sent to the URL which is in the address bar not the URL which is for ajax request. Can some body solve this issue.?

#13470 report it
Jose H. Milán at 2013/05/30 07:21am
LocalMode

If you want to work in localMode (just over a div) you need to add this to add a private option in YiinfiniteScroller.php:

private $_options = array(
        'loadingImg'    => null,
        'loadingText'   => null,
        'donetext'      => null,
        'itemSelector'  => null,
        'errorCallback' => null,
       ** 'localMode'     => null,**
    );

After that you can use

'localMode' => true,

in your widget options.

Thanks for this extension mates!

#13436 report it
rajesh chaurasia at 2013/05/29 05:20am
thanks

its nice extension its working fine for me.

#13153 report it
charmi at 2013/05/08 06:13pm
footer is no longer visible

How to make the footer visible

#12722 report it
Wildan Muhlis at 2013/04/08 06:01am
How to make The Next post triggerred by scroll bar in a div? not with browser scroll bar?

How to make The Next post triggerred by scroll bar in a div? not with browser scroll bar?

Thanks,

#12665 report it
MaxLord at 2013/04/04 06:59am
@sirin k

so - problem in assets publishing ;) check step-by-step how your client script publishes - that's where the shoe pinches

#12664 report it
sirin k at 2013/04/04 06:52am
It started working..

It started working when i manually linked that js like below:

<script src="/qponsr/frontend/extensions/yiinfinite-scroll/assets/jquery.infinitescroll.min.js"></script>
#12663 report it
MaxLord at 2013/04/04 06:41am
@sirin k

I can take a look and help if you publish it somewhere online.

#12662 report it
sirin k at 2013/04/04 06:36am
script is registered
<script type="text/javascript" src="/qponsr/frontend/www/assets/d6f41ffd/jquery.infinitescroll.min.js"></script>
 
  <script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
 
$('#posts').infinitescroll({'loadingText':'Loading...','donetext':'This is the end... my only friend, the end','itemSelector':'div.post','navSelector':'div.infinite_navigation','nextSelector':'div.infinite_navigation a:first','bufferPx':'300'});
});
/*]]>*/
</script>
#12661 report it
sirin k at 2013/04/04 06:34am
im gettin a js error

Uncaught TypeError: Object [object Object] has no method 'infinitescroll'

#12660 report it
MaxLord at 2013/04/04 06:29am
@sirin k check assets registration

this probably means that jquery.infinitescroll.min.js is not registered (is there "jquery.infinitescroll.min.js" in generated html source code?) - check why it's not registered. maybe problem with your assets folder chmod, or bug in custom client script class, or or or

#12659 report it
sirin k at 2013/04/04 06:24am
im gettin a js error

Uncaught TypeError: Object [object Object] has no method 'infinitescroll'

#12658 report it
MaxLord at 2013/04/04 06:08am
@sirin k it works

@sirin k

check js errors in console. if you see Next button, then something gone wrong in yii-infinitescroll js

#12657 report it
sirin k at 2013/04/04 06:03am
this is not working.

i tried this with this same example but wht i found is just a an anchor tag named "next" at the end and when i click on it will do a non-ajax loading to next page and so on. nothing else. disappointed. :(

#12478 report it
Giancarlo at 2013/03/22 11:54am
Bootstrap Theme Conflict on ie8

Using Twitter Bootstrap Theme

public function actionIndex()
    {
    Yii::app()->setTheme('bootstrap'); //http://www.cniska.net/yii-bootstrap/
    }

The script run correctly on Chrome. But on ie8 tell this message: "This is the end... my only friend, the end"

practically does not show the following pages

Can you help me?

#12254 report it
Sierra101 at 2013/03/09 05:50pm
Add callback functionality

I recognized that the current version of this great extension is missing a callback option which I needed to get masonry working correctly with infinite scroll.

I post it here, if somebody else is interested:

I just modified the YiinfiniteScroller Class from the Yiinfinite Scroll Yii Extension and added the callback part for Infinite Scroll which was missing:

private function createInfiniteScrollScript() {
    Yii::app()->clientScript->registerScript(
            uniqid(),
            "$('{$this->contentSelector}').infinitescroll(".$this->buildInifiniteScrollOptions().", ".$this->callback.");"
    );
}

At the beginning of the class I added the line

public $callback;

to use it later in the method.

Then you can call the Widget with an additional option callback, for example like this:

'callback' => 'function( newElements ) {
                    // hide new items while they are loading
                    var $newElems = $( newElements ).css({ opacity: 0 });
                    // ensure that images load before adding to masonry layout
                    $newElems.imagesLoaded(function(){
                      // show elems now theyre ready
                      $newElems.animate({ opacity: 1 });
                      $(".items").masonry( "appended", $newElems, true ); 
                    });
                }',

Works like charm. Hope it may help somebody else.

Leave a comment

Please to leave your comment.

Create extension