2

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.

Gabri Gabri
  • 23
  • 3

1 Answers1

0

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 &rarr;</a>
                <a href="2.html">3</a>
            </li>
        </ul>
Riddell
  • 1,429
  • 11
  • 22
  • hi, thanks for help me, i tried to change my code like the example, but it show me "load more items" and when i click it disappers, and does not show me the other div – Gabri Gabri May 03 '16 at 13:56
  • I believe both pages need to follow same format. So both pages must have same html structure – Riddell May 03 '16 at 14:02
  • for the pages that you said, are 2.html and 3.html? or index.html with the page that i want to load with infinite scroll? – Gabri Gabri May 03 '16 at 14:09
  • Yes so the pages should follow all the same pagination structure. – Riddell May 03 '16 at 14:13
  • yes, is what i thought before, so i copied and paste the code for the other pages, but i dont understand if i need to copy only the html with post class or all html file with head and footer. – Gabri Gabri May 03 '16 at 14:40
  • So you need to copy: #pagination #posts and maybe .next but I don't think that is required – Riddell May 03 '16 at 14:42