Wednesday, December 4, 2013

Yiinfinite-scroll Paging Issues

I have been using Davi Alexandre's yiinfinite-scroll extension to add Twitter like scrolling to my pet health record project.

I was using yiinfinite-scroll version 1.2 and yii 1.1.14. I followed the instructions and at first it seemed to work. I had a model with 12 rows and that happened to be my page size. Everything works, scrolling produces no paging.

If I set the page size to 10, the first hit on the page shows all 12 rows not 10. Additional scrolling produces the same 12 rows an additional 2 times before stopping at 36 rows total. Well something was definitely wrong! I found one problem that was my fault where I was incorrectly calculating the total number of rows. I fixed that issue and re-ran my test. Now it was showing 10 rows as expected on page load, good. Scrolling to the bottom displayed the last two items in the list which was also good. Scrolling again appended the previous two rows which wasn't expected. A final scroll to the bottom produced the expected end of list message.

After digging into the source code for the extension, I found that the current page appeared to be incremented incorrectly, there were two pages produced which was correct; however, the current page count was off by one when a scroll event occurred. A simple fix was all that was needed to correct the problem, increment the currentPage by one in the YiinfiniteScroller.php run() function:

public function run() {
        if($this->pageCount > 1) {
            $this->registerClientScript();
            $this->createInfiniteScrollScript();
            $this->renderNavigation();
            $this->currentPage++;
        }