# Pagination and Load more Issues

**URL:** <https://community.hubspot.com/t/pagination-and-load-more-issues/13366>\
**Category:** CMS Development\
**Created:** [March 6, 2019, 11:14am UTC](https://community.hubspot.com/t/pagination-and-load-more-issues/13366 "2019-03-06T11:14:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BernardH](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bernardh/32/14727_2.png) [@BernardH](https://community.hubspot.com/u/BernardH)\
**Post date:** [March 6, 2019, 11:14am UTC](https://community.hubspot.com/t/pagination-and-load-more-issues/13366/1 "2019-03-06T11:14:46Z")

</div>

> **[3 Must-Read Books on AI and Intelligent Automation](https://www.moonoia.com/blog/humans-need-not-apply-must-read-books-intelligent-automation-artificial-intelligence)**
>
> Will robots take our jobs? Replace automation with augmentation and you might get better answers.

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

> **[Blog | Moonoia](https://www.moonoia.com/blog)**
>
> Stay informed about our activities and discover how AI is revolutionizing document processing. Check out our blog and join the conversation today.

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

---

<div class="post-metadata">

**Author:** ![JasonRosa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jasonrosa/32/56551_2.png) [@JasonRosa](https://community.hubspot.com/u/JasonRosa)\
**Post date:** [March 6, 2019, 1:33pm UTC](https://community.hubspot.com/t/pagination-and-load-more-issues/13366/2 "2019-03-06T13:33:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![BernardH](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bernardh/32/14727_2.png) [@BernardH](https://community.hubspot.com/u/BernardH)\
**Post date:** [March 6, 2019, 2:01pm UTC](https://community.hubspot.com/t/pagination-and-load-more-issues/13366/3 "2019-03-06T14:01:43Z")

</div>

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?

> **[Blog | Moonoia](https://www.moonoia.com/blog)**
>
> Stay informed about our activities and discover how AI is revolutionizing document processing. Check out our blog and join the conversation today.

---

<div class="post-metadata">

**Author:** ![JasonRosa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jasonrosa/32/56551_2.png) [@JasonRosa](https://community.hubspot.com/u/JasonRosa)\
**Post date:** [March 6, 2019, 2:07pm UTC](https://community.hubspot.com/t/pagination-and-load-more-issues/13366/4 "2019-03-06T14:07:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BernardH](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/bernardh/32/14727_2.png) [@BernardH](https://community.hubspot.com/u/BernardH)\
**Post date:** [March 7, 2019, 5:08pm UTC](https://community.hubspot.com/t/pagination-and-load-more-issues/13366/5 "2019-03-07T17:08:43Z")

</div>

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?

```auto
<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>`

---

<div class="post-metadata">

**Author:** ![JasonRosa](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jasonrosa/32/56551_2.png) [@JasonRosa](https://community.hubspot.com/u/JasonRosa)\
**Post date:** [March 11, 2019, 6:51pm UTC](https://community.hubspot.com/t/pagination-and-load-more-issues/13366/6 "2019-03-11T18:51:50Z")

</div>

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

```auto
 $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:

```auto
 <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.