How to refresh a repeater’s items without reloading a page?

Ask the community
,
1

I have a repeater, which each of its item (row) includes a button that deletes the corresponding data in the related collection. Despite the successful deletion, I don’t know why the repeater doesn’t refresh itself unless I reload the page.
How can I refresh the repeater without reloading a page?
The following is the code I used for doing this

export function button10_click(event) {
	// 	//Add your code for this event here:
	$w("#dataset3").remove()

	$w("#repeater1").forEachItem(($item, itemData, index) => {
		$item("#repeatedImage").src = itemData.img;
		$item("#repeatedText").text = itemData.description;		
		$w('#text3').show()
	});
}
2

If the repeater is connected to a dataset then refresh the dataset after the removal.

3

Ali, I’m a little surprised that it’s deleting the right record. To get the desired result where it removes the row from the repeater and deletes the dataset record tied to it without re-loading the page, code it like this where it is specifically working with the dataset record of that repeater item:

export function button10_click(event) {
    let $item = $w.at(event.context);
    $item("#dataset1").remove();
    $item("#dataset1").refresh()
}

You could put the ForEachItem code in an onItemReady function. It’s not going to allow two $item declarations.

4

anthonyb, thank you so much for your help.
Your code just solved the problem.

5

@tony-brunsman is this possible without using a dataset? i.e. just with code direct to the repeater?

6

Stephen, I take it you are wondering whether or not this can be done utilizing wixData functions? It can. Here’s some generic code that will give an idea of how to proceed.

$w.onReady(function () {
     PopulateRepeater();
});

export function PopulateRepeater(){
   wixData.query("Collection")
   .ascending("title")
   .find()
   .then((results) => {
      $w("#repeater1").data = results.items;
   })
}

export function Button10_click(event) {
 const data = $w("#repeater1").data;
 let itemData = data.find(i => i._id === event.context.itemId);
 // have _id of the repeater item; now remove from the collection.
 wixData.remove("Collection",itemData._id)
 .then((RemovedItem) => {
    // reload the repeater
    PopulateRepeater();
 })
}

export function repeater1_itemReady($item, itemData, index) {
   $item("#text1").text = itemData.title;
}
7

I have a similar issue. While I have refreshed the dataset, it has only solved showing new items that are getting added. If I edit a particular item, it is updating in the collections, but not showing up in the repeater. Any suggestions?

8

Generally speaking, setting the .data value of a repeater will refresh its content. For a more detailed explanation click below

9

To ensure that the onItemReady() function will refresh the Repeater’s content completely, you should first clear the .data property and then set to the new contents. Like this:

$w("#repeater1").data = [];
$w("#repeater1").data = results.items;
10

In my case repeater was connected to dataset… &
$w ( “#dataset1” ). refresh (); did the trick for me.