Infinite scroll plugin doing nothing

Question

I currently have Zend pagination working perfectly fine, and I'm trying to integrate Paul Irish's infinite scroll plugin, but as far as I can tell the plugin is making absolutely no difference. The page controls are still showing up at the bottom of the page, and nothing happens when I scroll down. Here is my javascript:

$('#grid').infinitescroll({
    navSelector  : "div#paginationControl",
    nextSelector : "#next",
    itemSelector : "#grid div.entry",
    debug : true,
    bufferPx : 200
});

And my pagination controls, taken almost directly from zend's documentation

<?php if ($this->pageCount): ?>
<div class="paginationControl" id="paginationControl">
<!-- Previous page link -->
<?php if (isset($this->previous)): ?>
    <a href="<?php echo $this->url(array('page' => $this->previous)); ?>" id="previous">
        &lt; Previous
    </a> |
<?php else: ?>
    <span class="disabled">&lt; Previous</span> |
<?php endif; ?>

<!-- Numbered page links -->
<?php foreach ($this->pagesInRange as $page): ?>
    <?php if ($page != $this->current): ?>
        <a href="<?php echo $this->url(array('page' => $page)); ?>">
        <?php echo $page; ?>
        </a> |
    <?php else: ?>
        <?php echo $page; ?> |
    <?php endif; ?>
<?php endforeach; ?>

<!-- Next page link -->
<?php if (isset($this->next)): ?>
    <a href="<?php echo $this->url(array('page' => $this->next)); ?>" id="next">
    Next &gt;
    </a>
<?php else: ?>
    <span class="disabled">Next &gt;</span>
<?php endif; ?>
</div>
<?php endif; ?>

As far as I can tell everything should be set up correctly; grid is the container containing the list of items, entry is the class of each item, I have the plugin included before the script. I'm not getting any javascript errors in the console, but the plugin just isn't having any effect. What could I be doing wrong?

can we have demo of your page. It will help us to see HTML and JS and resolve the issue. — user1269989
you have to give pagination a class nextSelector : "a#next:last" that goes into your jquery initialization. Tryto see the demo on the infinite scroll page it will give you more idea. — user1269989
I'm not sure what you mean there. Do you mean that the selector I'm passing into the infinite scroll script is incorrect, or that I need to change the html of the next selector in the pagination controls? — jaimerump

jaimerump jaimerump · Accepted Answer · 2012-07-21T18:51:22

It was the itemSelector I had wrong. I copied it over from the example page and simply changed the post to entry, but the entry class was actually contained in a list element, so the correct code is itemSelector : "#grid li.entry". The infinite scroll script does nothing and reverts to the underlying pagination system if any of the selectors are invalid.

Infinite scroll plugin doing nothing

1 Answers