title: infinite-scroll uses same content after page 2 (using Couchbase as DB)
body: <p>I use <a href="http://masonry.desandro.com/demos/infinite-scroll.html" rel="nofollow">infinite-scroll with mansonry</a> and couchbase as Database. My Problem is that tt loads the same content after Page 2: Here is the code example:</p>
  
  <p>Page 1:</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;div class="box"&gt;Page 1 Box 1&lt;/div&gt;
     &lt;div class="box"&gt;Page 1 Box 2&lt;/div&gt;
     &lt;div class="box"&gt;Page 1 Box 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;nav id="page-nav"&gt;
      &lt;a href="link_to_page_2"&gt;Next/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Page 2:</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;div class="box"&gt;Page 2 Box 4&lt;/div&gt;
     &lt;div class="box"&gt;Page 2 Box 5&lt;/div&gt;
     &lt;div class="box"&gt;Page 2 Box 6&lt;/div&gt;
  &lt;/div&gt;
  &lt;nav id="page-nav"&gt;
      &lt;a href="link_to_page_3"&gt;Next/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Page 3:</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;div class="box"&gt;Page 3 Box 7&lt;/div&gt;
     &lt;div class="box"&gt;Page 3 Box 8&lt;/div&gt;
     &lt;div class="box"&gt;Page 3 Box 9&lt;/div&gt;
  &lt;/div&gt;
  &lt;nav id="page-nav"&gt;
      &lt;a href="link_to_page_4"&gt;Next/a&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var $container = $('#container');
  
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector: '.box',
      columnWidth: 100
    });
  });
  
  $container.infinitescroll({
    navSelector  : '#page-nav',    // selector for the paged navigation
    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.box',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
      }
    },
    // trigger Masonry as a callback
    function( newElements ) {
      // hide new items while they are loading
      var $newElems = $( newElements ).css({ opacity: 0 });
      // ensure that images load before adding to masonry layout
      $newElems.imagesLoaded(function(){
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
      });
    });
  </code></pre>
  
  <p>When I load the page it shows</p>
  
  <p>Page 1 Box 1</p>
  
  <p>Page 1 Box 2</p>
  
  <p>Page 1 Box 3</p>
  
  <p>->scroll</p>
  
  <p>Page 2 Box 4</p>
  
  <p>Page 2 Box 5</p>
  
  <p>Page 2 Box 6</p>
  
  <p>->scroll</p>
  
  <p>Page 2 Box 7</p>
  
  <p>Page 2 Box 8</p>
  
  <p>Page 2 Box 9</p>
  
  <p>..</p>
  
  <p>My first idea was, that the next link on page 2 point to page 2 again. But when i disable inifinit-scroll I can easily click von Page 1 to Page 2 to Page 3 and so on, using the next Link.</p>
  
  <p>Im using Couchbase in the background and the next link is something like this (<a href="http://www.couchbase.com/docs/couchbase-manual-2.0/couchbase-views-writing-querying-pagination.html" rel="nofollow">pagination w couchbase</a>):</p>
  
  <pre><code>?startkey="Box3-key"&amp;startkey_docid=Box3&amp;skip=1&amp;limit=3
  ?startkey="Box6-key"&amp;startkey_docid=Box6&amp;skip=1&amp;limit=3
  ?startkey="Box9-key"&amp;startkey_docid=Box9&amp;skip=1&amp;limit=3
  </code></pre>
  
  <p>I have no clue what the problem is.</p>