Yii 1.1: yiinfinite-scroll

Creates an Infinite Scroll Pagination, like in Twitter
109 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 while a new page is being loaded
  • loadingImg: The URL of the image displayed while a new page is being loaded
  • donetext: The text to be displayed when all the pages had been loaded
  • pages: The CPagination object
  • errorCallback: Javascript function that is called when there are ajax errors or 404s.
  • contentLoadedCallback: A Javascript function that is called when new itens are loaded. In its scope, this will be the DOM Element just loaded.
  • 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.3 (09/02/2014)

    • Added the contentLoadedCallback
    • Added tests!
    • Fixed bug that loaded the last page twice
    • Removed the navigation link in the last page. That link was pointing to a non existent page.
  • 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

#18072 report it
Ankit Modi at 2014/09/04 02:34am
Resolved

Thanks for resolve,that is exactly looking for this

Regards, Ankit Modi

#18061 report it
davi_alexandre at 2014/09/02 02:55pm
Re: Script is not working properly

Hi @ihemant. The new release fixes the problem where the last page is loaded twice. Also, the README was updated with information about the loadingImg property that can be used to change the loading gif

#17880 report it
inProcess at 2014/08/05 09:09am
@ihemant

I think I experienced your latest issue ...I solved by changing the content selector & item selector div id to something different on the second tab.

#17879 report it
ihemant at 2014/08/05 08:26am
Multiple Pagination on a single page, causing error

Hi I am working on a profile page, where I need to show the list of comments and list of posts. I am showing them in different tabs on a single page. Now when I call pagination, both the paginations are working at once, is there a method where i can tell the process the difference between these tabs.

Or anything else to run both the paginations simultaneously without interrupting each other.

#17793 report it
ihemant at 2014/07/23 02:58am
Script is not working properly

Its repeating my last page twice. Rest its working good. Also can anyone tell how do i replace loading gif with mine?

#17368 report it
euginepj at 2014/05/29 09:59am
Javascript not loading

I am really thankful for the plugin. It works great. But I got a problem, The Javascript is loading is first page. but not loading on the rest.

Here is the code i am working with.

<?php $this->widget('ext.yiinfinite-scroll.YiinfiniteScroller', array(
    'contentSelector' => '#infinityScroller',
    'itemSelector' => 'div.itemDiv',
    'loadingText' => 'Loading...',
    'donetext' => 'This is the end... ',
    'pages' => $pages,
)); ?>

I had tried using renderPartial. but still the problem remains the same.

if(Yii::app()->request->isAjaxRequest): 
    $this->renderPartial('object_list', $content, false, true);
  else: 
    $this->render('object_list',$content);
endif;

Everything else works fine.

#17069 report it
Sebastian at 2014/04/29 10:24pm
Logic error in currentPageDoesntExists()

I use this script very close to the actual example and it works pretty well, however I had the issue that the last page was repeated once. So if there should've been only 3 pages, I would get content of: 1, 2, 3, 3 (end). Checking the code, there seems to be a problem here:

private function currentPageDoesntExists() {
        if($this->pageCount > 1) {
            return $this->currentPage > $this->pageCount;
        } else {
            return $this->currentPage > 0;
        }
    }

If pageCount is 3 and we are on page 3 already, this will return 3 > 3, which is false. However the code for sending a 404 which means there is no next page, checks the end like this:

if($this->currentPageDoesntExists()) {
            throw new CHttpException(404);
        }

So we will have to return true in this function, to have it correctly throw the 404. So the corrected code should look like this:

private function currentPageDoesntExists() {
        if($this->pageCount > 1) {
            return $this->currentPage >= $this->pageCount;
        } else {
            return $this->currentPage > 0;
        }
    }

Regards, Sebastian

#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.

#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'

Leave a comment

Please to leave your comment.

Create extension