Hello,
I am using Virtual List with Infinite Scroll. It is working fine when we scroll page but, when we remove many row using “virtualList.deleteItem(index);”, it shows preloader only. Infinite function not calling.
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Customers</div>
<div class="right">
<a class="link icon-only" href="search-customer/">
<i class="icon material-icons md-only">search</i>
</a>
</div>
</div>
</div>
<div data-infinite-distance="50" class="page-content infinite-scroll-content" @infinite="loadMore">
<div class="block-title">Customers List</div>
<div class="list wmlist virtual-list">
</div>
{{#if hasMoreItems}}
<div class="preloader infinite-scroll-preloader" id="mainpreload"></div>
{{/if}}
{{#js_if "this.notfound == 'true'"}}
<div class="block notfound" id="notfound">
<div class="block-inner text-align-center">
<span class="material-icons text-color-gray">error_outline</span>
<p>No customer found</p></div>
</div>
{{/js_if}}
</div>
</div>
</template>
<script>
return {
data: function () {
return {
allowInfinite: true,
}
},
methods: {
LoadCustomers: function () {
app.preloader.show();
var self = this;
app.request.json(apiurl + '/get-customers.php', function (data) {
self.virtualList.replaceAllItems(data['customers']);
self.$setState(data);
app.preloader.hide();
});
},
DeleteCustomer: function (id, index) {
app.preloader.show();
var self = this;
index1 = index;
index = '#cust' + index;
app.request.post(apiurl + '/delete-customer.php', { customer_id: id }, function (data) {
app.preloader.hide();
$$(index).animate(
{
'height': 0,
'opacity': 0
},
{
duration: 300,
easing: 'swing',
complete: function (elements) {
//$$(index).remove();
self.virtualList.deleteItem(index1);
},
}
);
self.$root.showToast('Customer deleted successfully');
self.virtualList.update();
self.virtualList.clearCache();
});
},
loadMore: function () {
var self = this;
var $ = self.$$;
if (!self.allowInfinite) return;
self.allowInfinite = false;
if (self.hasMoreItems == false) {
return;
}
var searchcust = $$('#searchcust').val();
var searchdpcust = '';
if ($$('#duefilter:checked').val() === "1") {
searchdpcust = 1;
}
app.request.json(apiurl + '/get-customers.php', { lastid: self.lastItem, lastname: self.lastname, search: searchcust, duepay: searchdpcust }, function (data) {
self.virtualList.appendItems(data['customers']);
self.$setState({ lastItem: data['lastItem'], hasMoreItems: data['hasMoreItems'], lastname: data['lastname'] });
self.allowInfinite = true;
});
}
},
on: {
pageInit: function () {
var self = this;
var items = [];
self.virtualList = self.$app.virtualList.create({
el: '.virtual-list',
items: items,
height: 54,
renderItem: function (item, index) {
return '<li id="cust' + index + '" indx="' + index + '" cid="' + item.id + '">' +
'<a href="#" class="item-link item-content custitm">' +
'<div class="item-inner">' +
'<div class="item-title">' + item.name + '<div class="item-footer">' + item.mobile + '</div></div>' +
'</div>' +
'</a>' +
'<a href="#" class="wmmenubtn button popover-open" data-popover=".popover-menu" ><i class="icon material-icons">more_vert</i></a>' +
'</li>'
},
});
this.LoadCustomers();
},
}
}
</script>