Infinite scroll reaches the end, although there are more pages to show

Question

I'm following another developer on a site and trying to speed it up. The functionality requires many entries to be displayed within a single document object. Previously, load times were abysmal so I've switched to pagination and I'm trying to implement infinite scroll to allow the rest of the pages to show in the same document object.

It seems as though every thing is working correctly until infinite scroll tries to load the new pages. Once you scroll to the bottom it tries to load something but says it cant.

What am I missing here? Code to set it up is:

<div id="timeline">
{exp:channel:entries channel="stories" orderby="story_year" dynamic="no" limit="20" paginate="bottom"}
    <article class="largeArticle gold"> ...
    </article>

    {paginate}
    {if next_page} 
        <div class="navigation">
            <a href="{auto_path}" class="next">Show More</a>
        </div>
    {/if}
    {/paginate}
{/exp:channel:entries}
</div>

And the javascript is:

<script type="text/javascript">
  $(document).ready(function(){
        $("#timeline").infinitescroll({
            navSelevtor : ".navigation",
            nextSelector : "a.next",
            itemSelector : ".post",
            extractLink: true,
        });
  });
</script>

You can see this in action at http://thinkx.net/clients/manship/index.php/timeline.

Thanks for your help, I'm really stuck here.

Answer 1

The problem is with my code when calling infinitescroll().

The itemSelector needs to be the information that EE loops out. So in this case, it should be:

itemSelector : ".largeArticle"

Now, all I need to do is get the footer timeline to work with it at the same time.