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;
//console.log('firstlastindex'+lastItemIndex)
// 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
app.infiniteScroll.destroy('.infinite-scroll-content');
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
var sistaposten = $$('.produkter-listan li').length;
//console.log('andralastindex'+sistaposten)
app.request({
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===""){
app.infiniteScroll.destroy('.infinite-scroll-content');
// Remove preloader
$$('.infinite-scroll-preloader').remove();
$$('.page-previous').remove();
$$('.navbar-previous').remove();
app.infiniteScroll.create('.infinite-scroll-content');//----this is not working------
return;
}else{
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=String(strArray[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.
