How can I go to next item in a dataset after x seconds?
I want to to make a rotating news box based on database collection
Thanks
Hi,
You can do so in the following way:
- Add the button / box / text element (let’s say text).
- Connect the element to your data set, and connect its text field to the relevant column in your dataset.
- Add hooks to switch the content every x seconds (let’s say 1 second) as follows (you can remove the console logs):
$w.onReady( function () {
$w(‘#dataset1’).onReady( function () {
console.log(‘calling next!’);
setInterval(next, 1000); // this will call ‘next’ every 1000 milliseconds.
})
});
export function next() {
console.log(‘next called!’);
return $w(“#dataset1”).next()
.then( (item) => {
$w(‘#text1’).text = item.title;
} )
. catch ( (err) => {
$w(‘#dataset1’).refresh(); // this is in case you want to loop over the elements (otherwise, it will stop after the last element).
let errMsg = err;
console.log('got error: ’ + errMsg);
} );
}
Let me know if this helps,
Itay Koren
Great!!!
it seems to work perfectly…
I will now try to modify it in order to build my “rotating news” page
Thanks,
Gal
Two questions:
-
I’ve set a filter to the dataset. How can I check if the daset is empty? (in that case I would like to hide the “news” section of the page or put a message that there are no news)
-
In the code that you provided - what is tne need of the following lines?
.then( (item) => {
$w(’ #text1 ').text = item.title;
} )
I see that it works fine without them (maybe because I connected the text element to the dataset in the editor itself)
thanks
Hi,
- You can use the method ‘getTotalCount()’ to get the number of matching items, then check if there are more than 0 items.
You can see the documentation for what you can do with a dataset here: wix-dataset - Velo API Reference - Wix.com
Here’s an example (I also modified it to use ‘hasNext’ which is better than trying to get the next element and catch the error):
export function next() {
console.log(‘next called!’);
if ($w(‘#dataset1’).getTotalCount() > 0) {
if ($w(“#dataset1”).hasNext()) {
return $w(“#dataset1”).next();
}
return $w(‘#dataset1’).refresh(); // this is in case you want to loop over the elements (otherwise, it will stop after the last element).
// you can also remove the ‘return’, keep the ‘refresh’ and call ‘next()’ after the previous line in order for the loop to work immediately, and not with a delay (of one second currently)
}
$w(‘#text1’).text = ‘No news today!’; // this will be printed if there are no matching elements
}
- Indeed it works because you connected the text element to the relevant field in the dataset.
If you hadn’t done so, you would have needed that line.
Let me know how it goes.
Itay Koren
This worked almost too easily! Thank you!!
hi Itay,
Can you help with this code please, the code works fine as it is. I have 2 images in CMS gallery field and I have image element in the repeater which is populated by the first image from CMS gallery field.
I would like to change this code so the image element in the repeater is updated with the 2nd image form cms gallery field after 2 second and continously loops.
In this case my dataset = dataset 1
repeater = repeaterDesigns
CMS media gallery = mediagallery
image element in repeater = ThumbnailFromGallery
Thank you
Ravinder
$w(‘#dataset1’).onReady(() => {
//use the onItemready function for the repeater
$w(‘#repeaterDesigns’).onItemReady(($Item, ItemData) => {
//Get the media gallery field (an array of images)
const mediagallery = ItemData.mediagallery;
//Check if the mediaGallery field is populated and is an array
if (Array.isArray(mediagallery) && mediagallery.length > 0) {
//Get the first image from the gallery
const firstImage = mediagallery[0].src;
//const next = mediagallery[1].src;
$Item('#ThumbnailFromGallery').src = firstImage;
} else {
//Handle cases where the media gallery is empty or invalid
console.warn('Media gallery is empty or not an array for item:', ItemData)
}
});
});