Repeater - connect function firing too early / async-await

Ask the community
,
1

Hi everybody,

Based on a radio button change event (mailingList), I call the function “mailingAll” (which saves a checkbox field value (true) for all items included in the repeater (this checkbox is an input field in the repeater, which also allows for manual selection); mailingAll then calls a function refresh(), in order to to reload the repeater data with the checkboxes then checked.

Refresh() queries a data collection and updates the repeater - no issue on the query itself, thanks to some valuable sorting lessons from @brainstorrrm . Here it appears to be all about timing of updating the repeater items, included in the same refresh() function .

Despite all (for me) imaginable combinations of return/await/async or .then… - mailingAll saves all changes properly, but refresh() (the connectRepeater(result.items) part) does not display the saved checkbox values immediately, on change of the radio button group mailingList. So I am always “one step behind” the above radio button change event - in the display, not in the data collection.

Anybody, please? Here is my code:

export function mailingList_change(event) {
$w.onReady (() => {
 if ($w('#mailingList').value === "all") {mailingAll()}
 if ($w('#mailingList').value === "none") {mailingNone()}}
    });
}

async function mailingAll () {
$w.onReady (() => {
$w('#repeater').forEachItem(($x, itemData, index) => {
 if (itemData.id !== ""){
            itemData.mailing = true
            saveItem(itemData);
    }
    })
});
await refresh()
}

function refresh () {
$w.onReady(async function () {        
let source = "ABC"
let migrationDate = new Date(1597046025296)
let criterion = $w('#selector').value
$w('#repeater').data = [];
$w('#list').expand()
if (criterion ==="all") {
  let result = await
        wixData.query(source)
        .le("kundeSeit",migrationDate)
        .ascending("nachname")
        .find()
  await result
        result.items.sort(dynamicSort("nachname"));
            $w('#repeater').data = result.items
        connectRepeater(result.items)
        }
2

You have incorrectly used the onReady() function in the mailngAll() and refresh() functions. The onReady() function is an event handler which is triggered when the page is ready. For more information, see the onReady() API .

I also recommend reviewing the Corvid documentation to learn how to develop using Corvid.

3

Oh, that’s an honor - especially, as I have been using your examples on repeaters (and others, that have been highly helpful). Thanks for the hint, @yisrael-wix !

4

@yisrael-wix I have read the doc - but still don’t get it in practice. I keep staying “one step behind”, when clicking on the mailingList radio button … Repeater data is saved, but results shown after refresh() correspond to their previous status. Could you please have a second look?

If the onReady() handler refers to letting the page load completely, before continuing, it should in my understanding be placed where data is connected to the repeater … so in refresh(). But that did not solve anything. So I tried “embedding” all called functions (mailingAll(), refresh()) in an onReady() … without a satisfactory result, though …

Would you mind, please?

(p.s.: this is a dashboard page with client data, so cannot link to it …)

export function mailingList_change(event) {
$w.onReady (() => {
 if ($w('#mailingList').value === "all") {mailingAll()}
 if ($w('#mailingList').value === "none") {mailingNone()}
});
}

async function mailingAll () {
$w('#repeater').forEachItem(($x, itemData, index) => {
 if (itemData.id !== ""){
        itemData.mailing = true
        saveItem(itemData);
        }
    });
await refresh()
}

async function refresh () {
let source = "ABC"
let migrationDate = new Date(1597046025296)
let criterion = $w('#selector').value
$w('#repeater').data = [];
$w('#list').expand()
 if (criterion ==="all") {
 let result = await
        wixData.query(source)
        .le("kundeSeit",migrationDate)
        .ascending("nachname")
        .find()
 await result
       result.items.sort(dynamicSort("nachname"));
       $w('#repeater').data = result.items
 await connectRepeater(result.items)
        }
5

@info56409 Again, the onReady() function triggers once, only when the page is ready. After that, it does not run again. You cannot put this in an event handler. Your mailingList_change() event handler should not have an onReady():

export function mailingList_change(event) {
 if ($w('#mailingList').value === "all") {mailingAll()}
 if ($w('#mailingList').value === "none") {mailingNone()}
}

Also, you are not setting your Repeater correctly. I would suggest carefully reviewing the Repeater API for details.

The Search a Database example is an excellent way to see how to perform queries and then display in a Repeater. You can load this example in the Editor, play with it, and then modify it for you own use.

6

Thanks, @yisrael-wix

  1. onReady() - ok. Did not know, that this was a “one timer”. Thought it was linked to the page rendering, on change.
  2. Repeater API / search a database example: will have a look.