infinite scroll appearing below pagination

Question

This is my second question on Infinite Scroll and hopefully it is not another typo causing the problem!

I have everything working now, with one exception. New results are appearing below my pagination link. So when I select view more, they load below that, rather than at the bottom of the new entry's listed.

So I want the pagination to remain below all entries shown. Below is my code:

SNIPPET:

    <div class="col" id="blog-container">
        {exp:channel:entries
            channel="blog"
            dynamic="no"
            order_by="date"
            limit="2"
            status="open|tall|regular" 
            paginate_base="_embed/ajax_scroll"           
        }
        <div class="entry">
            <article>
                <header>
                    <p class="meta">
                        <span class="category">{categories}{category_name}{/categories}</span> / <span class="date">{entry_date format="%F %d, %Y"}</span>
                    </p>
                    <h1><a href="{url_title_path='blog/details'}">{title}</a></h1>
                </header>
                <img src="{blog_image}" alt="">
                {blog_excerpt}&nbsp; &nbsp; &nbsp; <a href="{url_title_path='blog/details'}" style="display: inline-block;">read more</a>
            </article>
        </div> <!-- /.entry -->

        {paginate}
        <p class="morePosts">
            {if next_page}<a href="{auto_path}" class="more">See More Posts</a>{/if}
        </p>
        {/paginate}
        {/exp:channel:entries}
    </div> <!-- /.col -->

TEMPLATE: {embed="_inc/site_head"}

AniA Collection Bridal Blog

{embed="_embed/blog_search"} {snip_ajax_scroll} $(document).ready(function(){ $('#blog-container').infinitescroll({ behavior : 'twitter', navSelector : ".morePosts", nextSelector : "a.more", itemSelector : ".entry", contentSelector: "#blog-container", loading: { finishedMsg: "", //#text you want to appear when you reach the end of the list msgText: "", //#text to appear while loading more items img: "" //#image to display while loading }, extractLink: true, // This is crucial if you want it work properly. Setting this to false or excluding it will not allow the script to work with EE }) }); // Unbind normal behavior $(window).unbind('.infscr');

        // Bind normal behavior to the click function and prevent the browser from redirecting to the URL.
        $('a.more').click(function(){
            $(document).trigger('retrieve.infscr');
            //$(this).hide("fast");
            //$(this).parent("p.morePosts").hide("fast");
            return false;
         });
    </script> 
    {embed="_embed/blog_nav"}
</div> <!-- /#mainContent -->

Thanks and let me know if you need anything else!

Answer 1

Not sure but you could try adding paginate=bottom as detailed here: http://ellislab.com/expressionengine/user-guide/modules/channel/pagination_page.html

Answer 2

Ah, I ran into this exact problem on a site a few months ago. Looking at your code, my guess is that you have pagination within the first channel entry tag pair.

So where you have

{paginate}
    <p class="morePosts">
        {if next_page}<a href="{auto_path}" class="more">See More Posts</a>{/if}
    </p>
{/paginate}
{/exp:channel:entries}

I would change to be outside of your main div container, and outside of your channel entry tag pair:

{/exp:channel:entries}
</div>

<nav id="pagination">
    {exp:channel:entries channel="blog" dynamic="no" paginate_base="_embed/ajax_scroll"}
       {paginate}
         <p class="morePosts">
           {if next_page}<a href="{auto_path}" class="more">See More Posts</a>{/if}
         </p>
       {/paginate}
    {/exp:channel:entries}
</nav>

Basically, this is a problem with your HTML structure, not with EE.

The reason your problem is happening is because in EE, the channel entry tag pair loops out EVERYTHING inside of it. So because your pagination exists within your tag pair, it's looping out all of the blog content PLUS the pagination. So taking the pagination tag pair out of your blog content, will keep it out of the loop.