5

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>
  • I'm getting my third page overwriting using this example instead of appending. Anyone know what I'm doing wrong? – Xeno Jun 24 '14 at 3:49
  • Looks like when I set limit from 8 down to 3 (so that I get more shots from my list of some 22), I find the page is refreshing on every other More linking. So the first More link click I get more scrolled/appended, but the second I get a page refresh, and only 3rd page contents, then the third click again append, the fourth refresh page. Also, it seems like the refresh might be coming from EE, like maybe in this second case the page initialization event is not caught by e.preventDefault();. – Xeno Jun 24 '14 at 4:42
  • If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. – Jeremy Gimbel Jun 24 '14 at 14:44
7

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> 
| improve this answer | |
  • Thank thee!!! Seems to be working. Now only to set the limit and see what that produces. I need a condition on the lines of if total_results == absolute_results the STOP loading things. – ObiWanKobi Mar 19 '14 at 13:54
  • @Derek Hogue... The above code works for the first paginated page but fails after that as the href of the paginations button is not updated. Any ideas? – magicspon Aug 7 '14 at 16:26
  • 1
    @magicspon You have to keep the pagination tags inside of the ajax-wrapper div so that they are replaced along with the content. – Derek Hogue Aug 8 '14 at 11:59
1

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 })

| improve this answer | |
1

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.