[SOLVED] Infinite scroll help needed

Questions
1

Im trying to get infinite scroll to work and I just started, and I started with the demoexample.
And im loading 19 posts from my database and when I scroll down, it adds li:s but instead of setting the item index to 20, it sets it to 53 and the next time I scroll down it set it to 172?

This is what I have so far.

<div data-name="produkter" class="page">
     <div class="navbar ">
      <div class="navbar-inner bar2 notranslate">
        <div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span><%=artikel%></span></a></div> 
      </div>
    </div>


<div class="page-content infinite-scroll-content">
<div class="block">

    <div class="list media-list chevron-center">
      <ul>
      
      <% do until rs.eof %>
      
        <li>
          <a href="/shop2/?produkt_id=<%=rs("produkt_id")%>" class="item-link item-content">
            <div class="item-media"><img src="<%=rs("image")%>" width="80"/></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title"><%=rs("artikel")%></div>
                <!--<div class="item-after">$15</div>-->
              </div>
              <div class="item-subtitle"><%=rs("pris")%>kr</div>
              <div class="item-text">
                <%=rs("texten")%>
              </div>
            </div>
         </a>
        </li>
        
        <%rs.movenext
        loop
        rs.close: set rs=nothing
        conn.close
        set conn = nothing%> 
        
      </ul>
    </div>

 	<div class="preloader infinite-scroll-preloader"></div>
   
</div>
</div> 
</div>

And in my .js file I have this.

$$(document).on('page:init', '.page[data-name="produkter"]', function (e) {
var page = e.detail;

// Loading flag
var allowInfinite = true;

// Last loaded index
var lastItemIndex = $$('.list li').length;

// Max items to load
var maxItems = 200;

// Append items per load
var itemsPerLoad = 20;

// Attach 'infinite' event handler
$$('.infinite-scroll-content').on('infinite', function () {
  // Exit, if loading in progress
  if (!allowInfinite) return;

  // Set loading flag
  allowInfinite = false;

  // Emulate 1s loading
  setTimeout(function () {
    // Reset loading flag
    allowInfinite = true;

    if (lastItemIndex >= maxItems) {
      // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
      app.infiniteScroll.destroy('.infinite-scroll-content');
      // Remove preloader
      $$('.infinite-scroll-preloader').remove();
      return;
    }

    // Generate new items HTML
    var html = '';
    for (var i = lastItemIndex + 1; i <= lastItemIndex + itemsPerLoad; i++) {
      html += '<li>Item ' + i + '</li>';
    }
	console.log (lastItemIndex)
    // Append new items
    $$('.list ul').append(html);

    // Update last loaded index
    lastItemIndex = $$('.list li').length;
  }, 1000);
});

});

Question 2.
I want to load more posts from my database, what is the best way to make everything work?
An ajax request to a page that gets the next 20 posts from the item id that I send to the page?
And how should the response look like? Im working with asp classic pages :slight_smile:
Im I doing it right?

Question 3.
It only seams to work the first time I load the page, if I scroll down and load more li:s it loads the li:s, but if I load another page and then go back to the list page, then it is not loading any more li:s when I scroll down.

Any input appreciated, thanks.

SOLVED - I got it working :slight_smile:

2

I am also trying to get mysql database work with infinite scroll. Can you please guide me how did you got it working? New here with framework7 so code sample may help a lot. Thanks

3

Hi. Yes I can give you some code to start with, the js code and then explain how I fetch it from my mysql db. Since you are probably not using asp classic haha. I can probably fix it tomorrow.