Hello,
I want to use infinite scroll on my virtual list. When my list already has < li > items in the file infinite scroll works fine. But I load my virtual list items after my ajax post and then infinite scroll does not work as it should.
var RecordsInterval = window.setInterval(function(){
if (typeof LastRecords === 'undefined') {
LoadLastRecords(sessionid,sessionmeasure);
} else if (LastRecords === "") {
$("#view-records .VLViewRecords").html("<p class='text-center' style='margin-top: 15px;'><img src='images/sad_box.png' class='img-xs'/>"+langfile.not_score+"</p>");
clearInterval(RecordsInterval);
return false;
} else {
clearInterval(RecordsInterval);
// Virtual List
var VLViewRecords = app.virtualList.create({
el: ".VLViewRecords",
items: $.parseJSON(LastRecords),
searchAll: function (query, items) {
var found = [];
for (var i = 0; i < items.length; i++) {
if (items[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
}
return found;
},
itemTemplate:
'<li>'+
'<a href="{{url}}" class="item-link item-content">'+
'<div class="item-media"><img src="{{img}}" class="badge-mdsmall"></div>'+
'<div class="item-inner">'+
'<div class="item-title">'+
'{{name}}'+
'<div class="item-header">{{date}}</div>'+
'</div>'+
'<div class="item-after">{{score}}</div>'+
'</div>'+
'</a>'+
'</li>',
height: 86 // Height of items
});
// Infinite Scroll
// View Records
// Loading flag
var allowInfinite = true;
// Last loaded index
var lastItemIndex = $$('.VLViewRecords li').length;
// Max items to load
var maxItems = 200;
// Append items per load
var itemsPerLoad = 3;
// Attach 'infinite' event handler
$$('#view-records .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;
// When max items is reached
if (lastItemIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
app.infiniteScroll.destroy('#view-records .infinite-scroll-content');
// Remove preloader
$$('#view-records .infinite-scroll-preloader').remove();
return;
}
// Generate new items HTML
var html = '';
for (var i = lastItemIndex + 1; i <= lastItemIndex + itemsPerLoad; i++) {
html += '<li>'+
'<a href="{{url}}" class="item-link item-content">'+
'<div class="item-media"><img src="{{img}}" class="badge-mdsmall"></div>'+
'<div class="item-inner">'+
'<div class="item-title">'+
'{{name}}'+
'<div class="item-header">{{date}}</div>'+
'</div>'+
'<div class="item-after">{{score}}</div>'+
'</div>'+
'</a>'+
'</li>';
}
// Append new items
$$('.VLViewRecords ul').append(html);
// Update last loaded index
lastItemIndex = $$('.VLViewRecords li').length;
}, 1000);
});
}
}, 1000);
The preloader also doesn’t scroll down: