Table and Database fill issues

For those who are able to help me on this issue, I think it is necessary to provide this long description to fully grasp what is not happening as it should.

I set up 2 custom pages. The “mainpage” directs the visitor to select up to 15 or more products. He can then request a formal, paper quotation which redirects to a “quote” page to display the products and collect information for a confirmation email. Then the email is sent.

My “mainpage” code “truncates” a private “products” database (not a dataset), collects a list of selected products, and re-populates the “products” database using backend functions. Then is redirects to the “quote” page.

My “quote” page Table element automatically displays the “products” database. The code collects user information from text input and saves in the “request” database. Then it saves the temporary “products” database results in the permanent “request” database. Finally it sends out confirmation emails with all the data to the visitor and the admin.

My problem
All of this works great the first time a visitor processes this “mainpage/quote page” cycle. However, when he restarts the cycle from the “mainpage” to select a new set of products, the “quote” page fails to display those products in the table (I confirm the new products are correctly found in the “products” database). Also very important, the “request” database does not populate fully, adding only a few of the “products” database items.

Below I have provided the “relevant” backend and quote page code. I certainly do appreciate any help you can provide on these two issues, which are possibly related to the 2nd “mainpage/quote page” cycle. I have been wrestling with these issue for several days now. Do you have any suggestions to make the Table render properly each time through the cycle, and to properly update the “request” database? Would making the functions ASYNC help? Would querying datasets instead of databases help (I don’t know how to code a dataset query in the backend)?

Thanks very much.

My BackendCode.jsw

import wixData from ‘wix-data’ ;
export function runClear () {
let returnValue = wixData . truncate ( “BASProducts” ,{ “suppressAuth” : true })
//wixData.truncate(“BASProducts”,[{suppressAuth:true}])
. then ( () => {
console . log ( “Success! All items truncated from BASProducts” );
})
. catch ( ( err ) => {
console . log ( "error message from backend " , err );
});
return “runClean finished” + [ returnValue ]
}
export function insertData ( db , toInsert ) {
wixData . insert ( db , toInsert )
. then ( ( results ) => {
let item = results ; //see item below
console . log ( "this item inserted into database " + db + " is: " , item )
})
. catch ( ( err ) => {
let errorMsg = err ;
console . log ( "errorMsg = " , errorMsg )
});
}

Relevant quote page code

import wixData from ‘wix-data’ ;
import { quoteRequest } from ‘backend/notifications’ ;
import wixLocation from ‘wix-location’ ;
import { sendEmail , sendEmailWithRecipient } from ‘backend/Email’ ;
import { insertData } from ‘backend/MyBackendCode’ ;

$w . onReady ( function () {
$w ( ‘#formStrip’ ). expand ();
$w ( ‘#errorStrip’ ). collapse ();
$w ( “#requestDataset” ). onBeforeSave (() => {

let checkFirst = $w ( ‘#firstName’ ). valid ;
let checkLast = $w ( ‘#lastName’ ). valid ;
let checkPhone = $w ( ‘#phone’ ). valid ;
if ( validatePhoneNumber ( $w ( ‘#phone’ ). value ) != true ) {
checkPhone = false
}
let checkEmail = $w ( ‘#email’ ). valid ;
let email = $w ( ‘#email’ ). value ;
email = email . trim ()
let emailVerify = $w ( ‘#emailVerify’ ). value ;
emailVerify = emailVerify . trim ()
if ( emailVerify != email ) {
checkEmail = false
}
if ( checkEmail && checkPhone && checkLast && checkFirst ) {

//This is the database SAVE action
$w ( ‘#requestDataset’ ). save ();

$w ( ‘#errorText’ ). hide ();
} else {
$w ( ‘#errorText’ ). show ();
return false ;
}
})

var time = new Date (). getTime ();
var date = new Date ( time );
let dateNow = date . toString ()
$w ( ‘#currentDate’ ). text = dateNow

wixData . query ( “BASProducts” )
. find ()
. then ( ( results ) => {
if ( results . items . length > 0 ) {
for ( let i = 0 ; i < results . items . length ; i ++) {
insertData ( “Request” , { “productName” : results . items [ i ]. productName , “variants” : results . items [ i ]. variants , “sku” : results . items [ i ]. sku , “price” : results . items [ i ]. price , “sortField” : results . items [ i ]. sortField })
}
} else {
console . log ( “no matching items found” )
}
})
$w ( “#requestDataset” ). onAfterSave (() => {

sendFormData ()

quoteRequest (); //In our example, the backend function is called quoteRequest .
console . log ( “A new notification was sent to all contributors.” );
$w ( ‘#formStrip’ ). collapse ();
$w ( ‘#errorStrip’ ). collapse ();
$w ( ‘#successStrip’ ). expand ();
$w ( “#header1” ). scrollTo ();

});
});

I solved both problem with one simple correction. Reading through some documentation, I discovered that the initializing the datasets inside the page’s onReady() function was critical. When I did so, both my display problem and my database update problem were resolved 100%. Now all works great!

To the dataset onReady function I added a console log to identify this has been done. The code I used is:

$w ( "#requestDataset" ). onReady ( () => {   console . log ( "The #requestDataset dataset is ready" );  });