[SOLVED] Infinite scroll only works the first time I load the page?

I have an infinite scroll that works the first time, and it loads the data from my db.
And in the callback I destroy it and then I try to reenable it, but it is not working.

So I have a search form and when you sumbit it, then it loads the page with the list items. Then when you scroll down, it loads new items as it should until there is no more to load! Good.

But when I then search for another word, and load the same page with realoadcurrent, then the infinite scroll is not working!?

This is what I have, and in the callback success I first destroy the infinite and then I try to create it again, but this does not work?

Im using stacked pages, if that has something to do with it? I tried to remove the previus pages since it is the same page I thought that it might try to set the infinite scroll on that page instead of the previus page, but it didn´t seam to make any difference.

Also, how do I reinit the preloader after I have removed it?

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

	var soktexten =$$(document).find('input[name=soktexten]').val()
	var kategori =$$(document).find('input[name=kategori]').val()
	var lan =$$(document).find('input[name=lan]').val()
	var ort =$$(document).find('input[name=ort]').val()
	var produkt_id =$$(document).find('input[name=produkt_id]').val()

// Loading flag
var allowInfinite = true;

// Last loaded index
var lastItemIndex = $$('.produkter-listan li').length;
// Max items to load
var maxItems = 200;

// Append items per load
var itemsPerLoad = 25;

// 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
      // Remove preloader
	var sistaposten = $$('.produkter-listan li').length;
	    method: 'GET',
	    url: 'shop/laddaprodukter.asp',
	    data: {
		  soktexten : soktexten,
		  kategori : kategori,
		  lan : lan,
		  ort : ort,
		  sistaposten : sistaposten,
		  produkt_id: produkt_id
	   		success: function (data) {
				if (data===""){
				  // Remove preloader
					app.infiniteScroll.create('.infinite-scroll-content');//----this is not working------
				var data = data
				data = data.slice(0, -1);
				var str = data;				
				var strArray = str.split("|");
				var html = '';
				var thepost;
				for (var i=0, len=strArray.length; i<len; i++) {
					thepost = thepost.split(",");	
					console.log('Postid: '+thepost[0]+' | Artikel: '+thepost[1]+' | Bilden: '+thepost[2]+' | Priset: '+thepost[3]+' | Texten: '+thepost[4]+' | FolderName: '+thepost[5])
					 html += '<li>'
					  html += '<a href="/shop2/?produkt_id='+thepost[0] +'" class="item-link item-content" style="padding-left:0px;">'
						html += '<div class="item-media"><div style="background-image:url(../dumpen/admin/user_images/'+thepost[5] +'/produkt/'+thepost[2] +'" class="listimage"/></div></div>'
						html += '<div class="item-inner">'
						  html += '<div class="item-title-row">'
							html += '<div class="item-title">'+thepost[1]+'</div>'
						  html += '</div>'
						  html += '<div class="item-subtitle">'+thepost[3] +'kr</div>'
						  html += '<div class="item-text">'+thepost[4] +'</div>'
						html += '</div>'
					 html += '</a>'
					html += '</li>'
				$$('.produkter-listan ul').append(html);

    // Update last loaded index
    lastItemIndex = $$('.produkter-listan li').length;
	//console.log ('lastindex'+lastItemIndex)
  }, 500);


Any input really appreciated, thanks.

$$('.page-previous').remove();  - Never do that.
$$('.navbar-previous').remove(); - Never do that.


You removed preloader from DOM > you need to add it again. Or hide => show.

Thanks, yes I just realized that I have to hide and show it instead :slight_smile: