Reputation: 23
i set my website like this:
<div id="posts" class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post post-preview">
<a href="post.html">
<h2 class="post-title">
Visualization Data Art
</h2>
<h3 class="post-subtitle">
How to make sense of big data
</h3>
</a>
<p class="post-meta">Posted by <a href="#">KP</a> on September 24, 2016</p>
</div>
<hr>
<div class="post post-preview">
<a href="3.html">
<h2 class="post-title">
About this blog
</h2>
</a>
<p class="post-meta">Posted by <a href="about.html">KP</a> on September 18, 2016</p>
</div>
<hr>
</div>
<div id="pagination">
<a href="2.html">1</a>
<a href="3.html" class="next">2</a>
</div>
and my javascript is this:
var ias = jQuery.ias({ container: '#posts', item: '.post', pagination: '#pagination', next:'.next ' });
when i try to load more content the button "older post" disappear without show me any pages. i try only the basic example find in the website.
Upvotes: 2
Views: 358
Reputation: 1489
The pagination looks wrong to me. Here are the docs Infinite AJAX Scroll Docs as you can see the ".next" is used on a link not "li" in your code you use it on "li" tag and "a" tag. I presume the way this plugin works is it looks for href on the a tag then ajax calls it and grabs it content then appends to the container DOM.
<ul id="pagination" class="pager">
<li class="next">
<a href="2.html">1</a>
<a class="next" href="2.html">Older Posts →</a>
<a href="2.html">3</a>
</li>
</ul>
Upvotes: 0