Pagination and Load more Issues

[BernardH]

http://www.moonoia.com/blog/humans-need-not-apply-must-read-books-intelligent-automation-artificial-...

I have some pagination in teh footer.

Clicking the image throws a 404

Clicking next or previous just reloads the page

On the listing page

http://www.moonoia.com/blog

Clicking load more just links to a page rather than loading the grid of posts

[JasonRosa · Accepted solution]

Hey, @BernardH it looks like you might be using the wrong HubL variables for the links in your post pagination custom module and you might just be missing a slash on the href that you're using for the images. If you go to your post pagination custom module, you'd want to change the HubL variables that you're using in the href on lines 4 and 5 to href="/{{ content.previous_post_slug }}" and then on lines 13 and 14 to href="/{{ content.next_post_slug }}"

[BernardH]

Many thanks that Worked!

is there any thing built in I  can use for load more on the listing page or would javascript library such as infinit eload be the best option?

https://www.moonoia.com/blog

[JasonRosa]

Hey @BernardH there isn't anything built into the tool for this but I've used infinitescroll for this in the past and that has worked well. 

[BernardH]

Thanks jason. I tried to getthis to work but it does not do anythjing or just continues to link to next page. Do you have any recommendation?

<div class="tiled-section tiled_listing">  
    <div class="tiled-listing-wrapper cell-wrapper">    
      <div class="post-listing">         
        {% for content in contents %}      
          <div class="post-item cf"> 
            {% if content.post_list_summary_featured_image %}        
              <div class="hs-featured-image-wrapper">
                <a href="{{content.absolute_url}}" title="" class="hs-featured-image-link">            
                  <img src="{{ content.post_list_summary_featured_image }}">
                </a>
              </div>
            {% endif %}        
            <div class="post-header clearfix">          
              <h2><a href="{{content.absolute_url}}">{{ content.name }}</a></h2>
              <p id="hubspot-author_data" class="hubspot-editable" data-hubspot-form-id="author_data" data-hubspot-name="Blog Author">
                <i class="fa fa-clock-o" aria-hidden="true"></i> {{ content.publish_date_localized }}
              </p>
            </div>
            <div class="post-body clearfix">
              {{ content.post_list_content|safe }}
            </div>
            <a class="btn" href="{{ content.absolute_url }}">Read More<i><img src="https://www.moonoia.com/hubfs/V2/icons/chevron-right.svg"></i></a>      
          </div>
        {% endfor %}
      </div>
      <div class = "scroller-status"> 
        <div class = "loader-ellips infinite-scroll-request"> 
          <div class="blog-pagination">
                <!--{% if last_page_num %}
                    <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
                {% endif %}
                    <a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>-->
                {% if next_page_num %}
                    <button class="all-posts-link next-posts-link load-more"><i class="mk-moon-loop-6"></i>Load More</button>
                {% else %}
                 <div class="no-post" href="">No More Posts</div>
                {% endif %}
                <p class = "scroller -status__message infinite-scroll-last " style="display: none!important;"> End of content </ p> 
                <p class =" scroll-status__message infinite-scroll-error " style="display: none;"> No more pages to load </ p> 
           </ div>
         </div>
      </div>
    </div>
  </div>
</div>
<script>

var $container = $('.tiled-listing-wrapper').infiniteScroll({
path: '.pagination__next',
append: '.post-listing',
status: '.scroller-status',
hideNav: '.pagination',
});

// load next page & enable loading on scroll on button click

var $viewMoreButton = $('.all-posts-link');
$viewMoreButton.on( 'click', function() {
// load next page
$container.infiniteScroll('loadNextPage');
// enable loading on scroll
$container.infiniteScroll( 'option', {
loadOnScroll: true,
});
// hide button
$viewMoreButton.hide();
});

</script>

[JasonRosa]

Hey @BernardH I don't know for sure but I think it is probably because your load more target doesn't have an href, therefore your code doesn't have anything else to load. 

Here is an example of a working example from another project (JavaScript): 

        $container.infinitescroll({
            // selector for the paged navigation (it will be hidden)
            navSelector  : ".blog-pagination",
            // selector for the NEXT link (to page 2)
            nextSelector : "a.next-posts-link:last",
            // selector for all items you'll retrieve
            itemSelector : ".post-item",
            // finished message
            loading: {
                // finishedMsg: 'No more pages to load.'
                finished: function() {
                    if( $('.post-listing').data('infinitescroll').options.state.currPage >= {{ total_pages|round(0, 'ceil') }}) {
                        // console.log('no more posts');
                        $('.blog-listing-wrapper').removeClass('more-posts');
                    }
                }
            }

The pagination in the HTML looking something like this: 

               <div class="blog-pagination">
                    {% if last_page_num %}
                        <a class="previous-posts-link" href="{{ blog_page_link(last_page_num) }}">Previous</a>
                    {% endif %}
                        <a class="all-posts-link" href="{{ group.absolute_url }}/all">All posts</a>
                    {% if next_page_num %}
                        <a class="next-posts-link" href="{{ blog_page_link(next_page_num) }}">Next</a>
                    {% endif %}
                </div>

Notice how the item with the class of "next-posts-link" has an href of the next page in that example.