I’m having a bit of an issue getting my timing correct. I’m wondering if it is better to use async await within the function or when you call the function within a function. Generic example below (I can provide code but it’s a mess and I’m a little embarrassed 
.
Example 1:
export async function buttonA click(event){
update database
await function B()
}
export function B {
data.query
refresh repeater
}
Example 2:
export function buttonA click(event){
update database
function B()
}
export async function B(){
await data.query
refresh repeater
}
Essentially I’m trying to have the user click a button inside a repeater which then triggers an update to the database. Then I want the repeater to refresh using the newly added data. I’ve got async/await everywhere but still having issues with the repeater showing the most recently added info.
Thoughts?
Hi Mike,
Do you have some code you are using now?
Don’t be embarrassed about your code.
Evryone has to start somewhere… we all did😅
Having the actual code will help alot better to understand what the current situation is.
Kind regards,
Kristof.
I seem to have it working in the Preview Mobile now but it’s not working in a published Mobile site. Could this be a browser cache issue?
Essentially I’m updating a row in a database collection using a button. When the user taps the button…
-
data collections gets updated (this works fine)
-
repeater is reset to []
-
data query is run and the repeater is repopulated.
this is where it breaks down the repeater shows the button that should be hidden. It doesn’t work when using the buttons but it works fine when I refresh the page…
Yep. I’m starting to lose it.
Works fine in
-
the desktop Preview
-
the mobile Preview
Does not work in live
-
desktop browser unless I refresh the page
-
mobile unless I refresh the page
Any ideas why?
Layout…I have 4 buttons in each repeater container. Based on the data in the data collection the buttons are hidden or shown. The button to Reserve works just fine, writes the data to the database and when the repeater is refreshed the appropriate buttons are shown. However, when I click the Cancel button, the data gets written to the database just fine but when the repeater is refreshed, the Cancel button still appears ontop of the Reserve button (one is behind the other).
wth? I think I’ve tried everything. I’ve console.log the repeater data before it goes into the ForEach loop and after every button click the data is correct. So I know it’s writing to the database fast enough and correctly.
Any help is appreciated!
export async function updateSchedule ( email , contractEnd ){
$w ( “#repeater1” ). data = [];
let today = new Date ();
let todayNum = today . getDay ();
let numOfMonths = monthDiff ( today , contractEnd )- 1 ;
**let** lastMinute = **new** Date ( today );
lastMinute . setHours ( lastMinute . getHours ()+ 36 );
**let** reserveDate = **new** Date ( today );
reserveDate . setHours ( reserveDate . getHours ()+ 72 );
console . log ( "this is the reserve date from top of function " + reserveDate );
**let** todayPlusSixMos = **new** Date ( today );
todayPlusSixMos . setDate ( todayPlusSixMos . getDate ()+ 180 );
**let** weekdayCount = Number ( memory . getItem ( "weekdayCount" ));
**let** weekendCount = Number ( memory . getItem ( "weekendCount" ));
**let** waitListCount = 0 ;
//trying to determine # of remaining sails available based on "use it or lose it" rule. # of months into the contract * monthly allocation
**let** waSailed , wpSailed , weaSailed , wepSailed = 0 ;
**let** sailedByType = **await** sailedSoFar ( email );
**for** ( **var** i = 0 ; i < sailedByType . items . length ; i ++){
**if** ( sailedByType . items [ i ]. type == "WA" ){
waSailed = sailedByType . items [ i ]. count
} **else**
**if** ( sailedByType . items [ i ]. type == "WP" ){
wpSailed = sailedByType . items [ i ]. count
} **else**
**if** ( sailedByType . items [ i ]. type == "WEA" ){
weaSailed = sailedByType . items [ i ]. count
} **else**
**if** ( sailedByType . items [ i ]. type == "WEP" ){
wepSailed = sailedByType . items [ i ]. count
}
}
**let** waRemaining , wpRemaining , weaRemaining , wepRemaining ;
**if** ( numOfMonths * 2 >= waSailed ){
waRemaining = 24 - numOfMonths * 2 ;
} **else** { waRemaining = 24 - waSailed }
**if** ( numOfMonths * 3 >= wpSailed ){
wpRemaining = 36 - numOfMonths * 2 ;
} **else** { wpRemaining = 36 - wpSailed }
**if** ( numOfMonths >= weaSailed ){
weaRemaining = 12 - numOfMonths ;
} **else** { weaRemaining = 12 - weaSailed }
**if** ( numOfMonths >= wepSailed ){
wepRemaining = 12 - numOfMonths ;
} **else** { wepRemaining = 12 - wepSailed }
**let** totalsByType = **await** totalByType ( email , contractEnd )
**let** waTotal , wpTotal , weaTotal , wepTotal = 0 ;
**for** ( **var** i = 0 ; i < totalsByType . items . length ; i ++){
**if** ( totalsByType . items [ i ]. type == "WA" ){
waTotal = totalsByType . items [ i ]. count
} **else**
**if** ( totalsByType . items [ i ]. type == "WP" ){
wpTotal = totalsByType . items [ i ]. count
} **else**
**if** ( totalsByType . items [ i ]. type == "WEA" ){
weaTotal = totalsByType . items [ i ]. count
} **else**
**if** ( totalsByType . items [ i ]. type == "WEP" ){
wepTotal = sailedByType . items [ i ]. count
}
}
**let** waitListResults = **await** waitListQuery ();
**if** ( waitListResults . items . length > 0 ){
waitListCount = waitListResults . items [ 0 ]. count ;
}
$w ( "#waitListCount" ). text = waitListCount . toString ();
**await** wixData . query ( "SailShareSchedule" )
. eq ( "yacht" , memory . getItem ( "yacht" ))
. ge ( "sailDate" , today )
. le ( "sailDate" , todayPlusSixMos )
. le ( "sailDate" , contractEnd )
. eq ( "month" , memory . getItem ( "month" ))
. ascending ( "sailDate" )
. limit ( 65 )
. find ()
. then ( ( results ) => {
**if** ( results . items . length > 0 ) {
$w ( "#repeater1" ). data = results . items ;
console . log ( $w ( "#repeater1" ). data );
$w ( "#repeater1" ). forEachItem ( ( $item , itemData , index ) => {
**let** month = itemData . sailDate ;
**let** longMonth = month . toLocaleString ( 'en-us' , { month : 'short' });
$item ( "#schedDate" ). text = longMonth + " " + itemData . sailDate . getDate ();
$item ( "#dayOfWeek" ). text = itemData . day ;
$item ( "#period" ). text = itemData . period ;
//styles container box weekend vs weekday
**if** ( itemData . type === "WEA" || itemData . type === "WEP" ){
$item ( "#box1" ). style . backgroundColor = "rgb(85,148,206)" ;
} **else** {
$item ( "#box1" ). style . backgroundColor = "white" ;
}
//checks to see if sail session is booked by member and within the 72 hour reservation confirmation window
**if** ( itemData . reservedBy == email && itemData . sailDate <= reserveDate ){
$item ( "#confirm" ). show ();
$item ( "#waitList" ). hide ();
$item ( "#reserve" ). hide ();
$item ( "#cancel" ). hide ();
}
//checks to see if sail session is booked by member and greater than 72 hours from now
**if** ( itemData . reservedBy == email && itemData . sailDate > reserveDate ){
$item ( "#confirm" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#reserve" ). hide ();
$item ( "#cancel" ). show ();
}
//sail session is reserved by someone other than member and less than 72 hours show WaitList
**if** ( itemData . reservedBy && itemData . reservedBy !== email && itemData . sailDate <= reserveDate && waitListCount < 3 && ! itemData . waitListEmail ){
$item ( "#reserve" ). hide ();
$item ( "#cancel" ). hide ();
$item ( "#confirm" ). hide ();
$item ( "#waitList" ). show ();
}
//sail session is greater than 72 hours OR current WaitList count is >= 3 hide WaitList
**if** (( itemData . reservedBy && itemData . reservedBy !== email && itemData . sailDate > reserveDate ) || waitListCount >= 3 ){
$item ( "#reserve" ). hide ();
$item ( "#cancel" ). hide ();
$item ( "#confirm" ). hide ();
$item ( "#waitList" ). hide ();
}
//for each main type checks to see weekend or weekday reservation max and annual total max by type is met or exceeded
**if** ( itemData . reservedBy == **undefined** || itemData . reservedBy == "" || itemData . reservedBy == **null** ){
**switch** ( itemData . type ) {
**case** "WA" :
**if** ( weekdayCount >= 12 || waTotal >= 24 || Number ( $w ( "#waCount" ). text ) >= waRemaining ){
$item ( "#reserve" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#cancel" ). hide ();
$item ( "#confirm" ). hide ();
} **else** {
$item ( "#reserve" ). show ();
$item ( "#cancel" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#confirm" ). hide ();
}
**break** ;
**case** "WP" :
**if** ( weekdayCount >= 12 || wpTotal >= 36 || Number ( $w ( "#wpCount" ). text ) >= wpRemaining ){
$item ( "#reserve" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#cancel" ). hide ();
$item ( "#confirm" ). hide ();
} **else** {
$item ( "#reserve" ). show ();
$item ( "#cancel" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#confirm" ). hide ();
}
**break** ;
**case** "WEA" :
**if** ( weekendCount >= 8 || weaTotal >= 12 || Number ( $w ( "#weaCount" ). text ) >= weaRemaining ){
$item ( "#reserve" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#cancel" ). hide ();
$item ( "#confirm" ). hide ();
} **else** {
$item ( "#reserve" ). show ();
$item ( "#cancel" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#confirm" ). hide ();
}
**break** ;
**case** "WEP" :
**if** ( weekendCount >= 8 || wepTotal >= 12 || Number ( $w ( "#wepCount" ). text ) >= wepRemaining ){
$item ( "#reserve" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#cancel" ). hide ();
$item ( "#confirm" ). hide ();
} **else** {
$item ( "#reserve" ). show ();
$item ( "#cancel" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#confirm" ). hide ();
}
**break** ;
**default** :{
$item ( "#reserve" ). show ();
$item ( "#cancel" ). hide ();
$item ( "#waitList" ). hide ();
$item ( "#confirm" ). hide ();
}
}
}
//check to see if annual type allocation is met
//check to see if current month max by type is met i.e. WEA = 2 or WA = 5
//check to see if next 3 month max by type is met i.e. WEA & WEP = 3 or WA = 9 or WP = 6
})
}
});
}
I’m starting to think it has something to do with ForEachItem vs OnItemReady. When I refresh the page it all looks great. I have to refresh all items in the data since there are a bunch of counts that I’m using to determine if a button should be shown.
someone please put me out of my misery…over a week of struggling with this. As simply as I can put it…
I’m hiding a “cancel” button when a field is empty. When the user clicks the “reserve” button it inputs user’s email into the field and then shows the “cancel” button and hides the “reserve” button. this works great.
When the user clicks the newly appearing “cancel” button, the field is emptied. The “reserve” button reappears but the “cancel” button is not hidden. EVERY Case in my code above is hiding the “cancel” button.
I’m clearing the repeater at the beginning of the function, then running another query to grab all the data. I’ve tried both forEachItem and onItemReady on the repeater data.
It’s not a browser issue, I’m publishing and testing on my mobile too!
btw…the default setting for all buttons is hidden.
It just feels like there is some “residual” information that is keeping the “cancel” button shown.
Finally, when I refresh the page it works fine. All the buttons are shown/hidden as expected. I really don’t think it’s a timing issue. I’ve put timeouts on the “click cancel button” event so the new data gets written, timeout, query is run and screen text is updated, timeout, then the main repeater refresh takes place.
Ugh!!!
Hey Mike. That code you shared is a little difficult to look at and be able to read/know exactly where to point you since it’s so much but…
How familiar are you with debugging in the browser?
I would suggest perhaps using breakpoints and slowly walking through the code to debug and isolate the problem.
See this article for how to debug your code in the FE as finding your page code in the browser is a little different in a velo site due to how things are bundled. Specifically look at the section “Accessing Client-Side Source Files”
Also…if you are comfortable with this could you post a link to the site?
@amandam the pages I am working on are role restricted and don’t really want to post the site here. Happy to work with a wix/velo person offline. However, I think I’ve found the culprit through some trial and error.
It appears that even though I clear out the repeater data using:
$w(“#repeater1”).data = [];
and then run my query, find the updated data, then write the data back to the repeater with this:
$w ( “#repeater1” ). data = [];
console . log ( “repeater is cleared” )
//main Query of latest data to update schedule, eligible sail sessions and buttons allowed
await wixData . query ( “SailShareSchedule” )
. eq ( “yacht” , memory . getItem ( “yacht” ))
. ge ( “sailDate” , today )
. le ( “sailDate” , todayPlusSixMos )
. le ( “sailDate” , contractEnd )
. eq ( “month” , memory . getItem ( “month” ))
. ascending ( “sailDate” )
. limit ( 70 )
. find ()
. then (( results ) => {
if ( results . items . length > 0 ) {
$w ( "#repeater1" ). data = results . items ;
$w ( "#repeater1" ). forEachItem (( $item , itemData ) => {
//this is where I perform all of the if else statements to hide or show the buttons.
the code isn’t applying the rules on the updated data. I’m now attempting to rewrite the if/else statements to breakout each action.
And another thing that has me baffled… the if/else rules work perfect when I refresh the page. The page onReady is calling the same updateRepeater function as the rest of the code. Why do the rules apply on the page refresh but not the repeater refresh? It’s the SAME function in either scenario. What’s the difference between a page refresh and a function rerunning? Is there “residual data” lingering?
@amandam I’m now convinced that there is a bug. I hide all buttons at the beginning of the repeater forEachItem function. This should now hide the button UNLESS one of the If statements was triggered. So I then put a console.log (error message) in the only If statement that would show the “cancel” button. The console.log didn’t show up! So this if wasn’t triggered, therefore the show “cancel” button should not have been triggered. The hide “cancel” button command at the beginning of the forEachItem should have been the only thing acting on it.
Mike,
I have had to do similar in the past but used a slightly different design. Instead of setting show/hide of the elements in the click functions, I would set global variables (above the onReady) like let showButton1 = true; let showButton2= false. In the logic of the click functions I would then set the variable to true/false based on the case AND THEN have the last line of my onReady function be:
setInterval ( function () {
if (showButton1) {
$w('#button1').show();
} else {
$w('#button1').hide();
}
// same as above for each other button
}, 1000 );
This will run every second once the page loads. So if something funky is happening with the repeater reloading, the hide will get picked up the next time the loop runs. It’s a bit hacky and brute force, but it tends to work for me.
Hope that helps.