Infinite scroll and pagination on ee?? Anyone has this working?

Question

Good day all I have had this issue for a while now and can't find really good updated techniques to create the infinite scroll and pagination function where clicking 'load more' loads entries beneath until there are no more entries. I need some simple code that would make this work, currently my code basically just gives me entries on a new page but i want it to load on the same page beneath each other. Has anyone succesfully achieved this hassle free?

Who ever has the correct answer I will tell the world of your tale and everyone else will call you king/queen of EE Pagi-Nation! Here is my terrible coding below!

PS: I have tried justin long's method and it did not work for me, I mailed him too.

<div class="col" id="blog-container">
        {exp:channel:entries
            channel="blog"
            dynamic="no"
            orderby="date"
            limit="2"
            status="open|tall|regular"
            paginate_base="embed/ajax_scroll"               
        }

        {if no_results}
            <div class="entry">
                <article style="min-height: 600px;">
                    <header>
                        <h1>No Results</h1>
                    </header>
                    Check back soon for more blog posts. 
                </article>
            </div> <!-- /.entry -->
        {/if}
        <div class="entry">
            <article>
                <header>
                    {title}
                </header>
               {blog_summary}
            </article>
        </div> <!-- /.entry -->

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

      <script type="text/javascript" src="/httpdocs/static/js/jquery.infinitescroll.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#blog-container').infinitescroll({
                  navSelector : "p.morePosts",
                  nextSelector : "a.more",
                  itemSelector : ".entry",
                  contentSelector: "#blog-container",
                  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#next').click(function(){
            $(document).trigger('retrieve.infscr');
            return false;
         });

    </script> 
</div>

Answer 1

No reason why you can't get an infinite scroll working in EE. Though really you don't need all the overhead of the infinite scroll plug-in, which forces its particular requirements on you as well. A small bit of jQuery can do this just as well. You just need to add one additional wrapper to your markup so that you can target the content you want to load via Ajax, and be able to append it to your parent container.

So keep all of your HTML markup the same, but just add one more div of inside of your content container.

Also, you have paginate_base="embed/ajax_scroll" - remove that, just let the pagination links point to the same page you're on. This way they'll work even if javascript is disabled.

<div class="col" id="blog-container">
    <div class="ajax-wrapper">

    ... all of your markup, without the javascript ...

    </div>
</div>

Then, load this javascript:

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.morePosts').on('click', 'a', function(e)
        {
            // Don't follow the link
            e.preventDefault();

            // Create a loading message and add it in place of the link
            loadingMessage = $('<p class="loading">Loading...</p>');
            $('.morePosts').replaceWith(loadingMessage);

            // Fetch the next page
            $.get($(this).attr('href'), function(data)
            {                                           
                // Only grab the part of the page we want
                content = $(data).find('.ajax-wrapper').hide();

                // Add it to the DOM
                $(content).appendTo('#blog-container');

                // Remove loading indicator 
                $('.loading').fadeOut('fast').remove();

                // Fade-in our new content
                $(content).fadeIn('fast');
            });
        });
    });
</script> 

Answer 2

I was having some issues, where by the second time I clicked the pagination button the preventDefault was getting ignored.

<div class='journal' data-behaviour='masonry loadMoreJournals'>
    <div class="ajax-wrapper">
            {!-- ee loop --}
 </div>
</div>

and the js,

instead of

$('.journal').on('click', 'a', function(e){ stuff })

this

$('.journal').delegate('.view-more', 'click', function(e) { stuff })

Answer 3

On the off chance that someone else finds this and has the same issue as magicspon in which the second click ignores the preventDefault business, this code works on all clicks

  $(document).ready(function()
  {
      $('.morePosts').on('click', 'a', clickHandler);

      function clickHandler(e) {
          // Don't follow the link
          e.preventDefault();

          // Create a loading message and add it in place of the link
          loadingMessage = $('Loading...
');
          $('.morePosts').replaceWith(loadingMessage);

          // Fetch the next page
          $.get($(this).attr('href'), function(data)
          {                                           
              // Only grab the part of the page we want
              content = $(data).find('.ajax-wrapper').hide();

              // Add it to the DOM
              $(content).appendTo('.calendar-list');
          $('.morePosts').on('click', 'a', clickHandler);

              // Remove loading indicator 
              $('.loading').fadeOut('fast').remove();

              // Fade-in our new content
              $(content).fadeIn('fast');
          });
      }
  });

A friend (whom I now owe many beers) added the click handler bit so the .morePosts link always has the preventDefault applied.