I have put together a simple demonstration of a problem that I’m facing when using a repeater in conjunction with wixData. I realise some may suggest using a dataset, but my real-world scenario is more complex hence the need for linking the repeater to the results of a wixData query. The problem I am facing is that sometimes (not always) when clicking a button to remove an item from the repeater data, the removal takes place, but refreshing the data in the repeater still gets the deleted item even though the function to get the repeater data is being called AFTER the promise return of the wixData.remove() function!
If you want to test it out for yourself you can give it a try here: https://astutesystems.wixsite.com/testsite/test-repeater
Here are the details of how it is working… I have a simple repeater on a page as shown below
This will be linked to data from a dataset as shown here…
The relevant code for the page is as follows:
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;
import uuid from ‘uuid’;
var masterID = ‘31068ef7-fe5e-4e2d-9d7a-5796966edaf7’;
$w.onReady( function () {
$w(‘#repeater’).onItemReady(repeater_itemReady);
$w(‘#btnAddData’).onClick(btnAddData_click);
$w(‘#btnDelete’).onClick(btnDelete_click);
getRepeaterData();
});
function repeater_itemReady($item, itemData, index) {
$item(‘#lblHeading’).text = itemData.heading;
$item(‘#lblDetails’).text = itemData.details;
}
function getRepeaterData() {
return new Promise((resolve, reject) => {
wixData.query(‘repeater-test’)
.eq(‘masterId’, masterID)
.descending(‘_createdDate’)
.find()
.then((results) => {
console.log(‘getRepeaterData returned ’ + results.items.length + ’ rows from dataset’);
$w(‘#repeater’).data = results.items;
if ($w(‘#repeater’).hidden) {
$w(‘#repeater’).show();
}
})
. catch ((err) => {
console.error(err);
reject(err);
});
});
}
function btnDelete_click(event) {
var itemData = $w(‘#repeater’).data.find((element) => {
return element._id === event.context.itemId;
});
wixWindow.openLightbox('Confirm Removal')
.then((data) => {
if (data.result) {
console.log('About to remove ’ + itemData.heading);
wixData.remove(‘repeater-test’, itemData._id)
.then((results) => {
console.log(results);
getRepeaterData();
})
. catch ((err) => {
console.log(err);
});
}
});
}
One of the ways that I am testing this is using the console to see when an item is being removed and then how many items the getRepeaterData() function finds from the dataset. In theory, after removing an item there should be one less than before (most of the time this is the case)… but here is an example of the intermittent problem - the getRepeaterData() function finds 4 records… 1 is deleted then it again finds 4 records!
A simple refresh of the page then shows just the expected 3 records.
I’m really not sure what’s going on and would appreciate any thoughts/suggestions. Is there a genuine error with the wixData.remove function? Is its promise being resolved before the row is actually removed from the dataset? Would this perhaps be less likely to be a problem if the removal code was moved to a backend function?
Thanks in advance
