Dataset .refresh() doesn't update repeater items?

Ask the community
,
1

I’ve written some code that automatically updates a database collection column in case something’s wrong. I’m having a problem refreshing the frontend of my website to show this database update, however.

More specifically, I have a database collection for numerous research papers, with fields for the title, citation, abstract, publication date, link, and the ‘publication number’ of each paper. The publication number, as I have defined, is an ‘index’ of the research paper with respect to the date of publication (i.e. the first paper published, with the earliest publication date, should have a publication number of 1).

I want the publication numbers to update automatically if there’s something out of order: for example, if a new paper is added in between two previously numbered research papers, then all the ‘publication numbers’ should update so that everything is in order and shouldn’t have to be changed manually). Updating the database collection works fine. The problem I’m having is refreshing the repeater I’m using with the new database information without having the reload the page .

Here is my code that I use to refresh my dataset and update my repeater.
This function is called conditionally in the page .onReady() handler if updates have been made to the database using wixData.update() . It does actually get called properly, so the problem isn’t in it not being called, but rather how it works.

export function refreshDataset() {
    $w(DATASET).onReady(() => {
        $w(DATASET).refresh()
            .then(() => {
                updateElements(); // runs .forEachItem() on the repeater, among other things
            });
    })
}

Here is the entire code for this page

Here is a video that shows what I’m trying to do.

If you need to see anything else in order to properly diagnose the problem / provide a solution, I’d be happy to provide it.

2

If you want to refresh your REPEATER, you have to do something like that…

$w('#repeater1').data = results.items

This example here works completely without use of any dataset…
https://russian-dima.wixsite.com/meinewebsite/repeater-dropdown

import wixData from 'wix-data';

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

export function BTNsearch_click(event) {load_Data()}

function load_Data (parameter) {console.log("GO")
    wixData.query("Companies")
    .contains("companyGroup", $w('#dropdown1').value)
    .find()
    .then( (results) => {
 if(results.items.length > 0) {
 let firstItem = results.items[0]; //see item below

            console.log(results.items)
            $w('#repeater1').data = results.items

            $w("#repeater1").onItemReady( ($item, itemData, index) => {
            $item("#pic").src = itemData.logo;
            $item("#ID").text = itemData.title;
            $item("#group").text = itemData.companyGroup;
            $item("#title").text = itemData.companyName;
 //  $item("#image1").onClick( (event) => {} );
            });
        } 
 else { }
    })
    .catch( (err) => {
 let errorMsg = err;
    });
}

In this code you will recognize the refreshing-method for a repeater (without the use of any DATASET).

3

Huh. Interesting. I will try this out, thank you!

4

On second thought, I think switching to not using a dataset would be a big change and probably not a best course of action since I’m using the dataset to easily load more, load all, sort, and filter items. Thanks for the idea, though, I’ll see if there’s anything I can take from it.

5

Have you tried clearing the content of the repeater before throwing new data at it, like:

REPEATER.data = []; //without this the repeater does not refresh

6

Hm, I’m not manually putting inputting data into the repeater through the .data attribute (I’m using a dataset that is connected to the repeater), so this doesn’t work (I tried, it just makes the repeater not show up).

7

It seems I have found the key to solving this problem: I need to await my database updates and then refresh my dataset. It seems my dataset refresh was getting ahead of itself.

await wixData.update(DATABASE, item);

The repeater updates fine now that the refresh actually waits for the database changes to complete before refreshing; no need to use repeater.data to assign the data to the repeater, I can still use the dataset that I connected!

Thanks for the help, everyone :slight_smile:

8

I think I need to share this code too especially for the beginners who want to update a repeater that’s connected to a dataset. To clarify it: The $w(‘#datasetName’) is used to select an element on the page. And “.refresh()” is used for refreshing the selected element. Make sure you don’t include the parentheses for the first code. The 3000 will be the time (milliseconds) set for the code to refresh the element.

1-) CODE TO REFRESH A REPEATER CONNECTED TO A DATASET IN EVERY 3 SECONDS:

$w.onReady(function (){
	setInterval($w('#datasetName').refresh, 3000)
});

2-) DEFAULT CODE TO REFRESH A REPEATER CONNECTED TO A DATASET IN EVERY PAGE REFRESH (WON’T REFRESH THE REPEATER AUTOMATICALLY):

$w.onReady(function (){
    $w("#datasetName").refresh()
});

So for this example, the main method to differentiate the “.refresh()” capability is to either use it in a “setInterval” in the correct format or directly use it with only a “$w”.

The “#datasetName” is visible when you click the element you want to refresh (in this case, even though we’re refreshing the data in the repeater since it’s connected to the dataset, we must select the element of the dataset). You’ll see the “ID” section on the right side.

If the “ID” section isn’t there, the “Dev Mode” is probably turned off. To turn it on, click “Dev Mode” on top of the page and click “Turn on Dev Mode”.