Question: Why is the custom UI element not hidden by default and disappearing?

Product: Wix Editor (not Studio)

What are you trying to achieve? The goal is to have a custom submission message for my form, when submitting the post.

What have you tried already? I have 2 code page frontend pages and 3 backend .JS files. I'm leveraging Wix UI Element IDs to identify the form, the standard success message, and the grouped UI elements that I grouped together to form a much more aesthetically pleasing to look at confirmation, in addition to the little ones Standard chunks of ugly text generated with shutdown. the shelf form offered by Wix.

To do this, I have logic in file number two of three .JS files that is waiting for the standard success message to appear. If it appears, hide the standard success message, change the boolean value "A" to true, and redirect the user from UI page 1 to UI page 2. Here is the code.

import wixLocationFrontend from 'wix-location-frontend'; // Import module wixLocationFrontend import wixData from 'wix-data'; // Import the wixData module to work with data. import {formSubmitted} from “GloballyAvailable.js”;

 // Add a listener for the standard success message
$w.onReady(function () {
 // Define SuccessfulSubmission function
 function SuccessfulSubmission() {
 // Hide the standard success message
 $w("#text264").hide();
 // Set the boolean value to true
 wixData.set('formSubmitted', formSubmitted, true);
 // Redirect the user to page 2
 wixLocationFrontend.to('https://www.myitcontracts.com/jobs/');
 } 

 // Add a listener for the standard success message
 $w("#section1col2form1").onAfterSave(() => {
 SuccessfulSubmission();
 });

});

// Export SuccessfulSubmission function
 export { SuccessfulSubmission };

The boolean "A" defaults to false in one of the three backend .js files, here is my code.

 let formSubmitted = false;

$w.onReady(function successBoolean() {
 export { formSubmitted };
});

When the user is redirected to page 2, I have a listener on screen load to check if the boolean value is true or false; if true, the custom UI element I created will “show”/display for a total of 4 seconds and then disappear and reset the boolean value to false so that the notification doesn't stay there every time the page is accessed 2 by other means or is updated, here is my code.

 import wixData from 'wix-data'; // Import the wixData module to work with data.
import { formSubmitted } from “GloballyAvailable.js”;

$w.onReady(function z() {
 $w.(function SuccessMessage () {
 wixData.get(formSubmitted)
 .then((result) => {
 // If the form was successfully submitted, show the custom success message
 if (result && result.formSubmitted) {
 $w("#group2").show();
 // Set a timer to hide the custom success message after 4 seconds
 setTimeout(function () {
 $w("#group2").hide();
 // Reset the boolean value to false
 wwixData.set('formSubmitted', formSubmitted, false);
 }, 4000); // 4000 milliseconds = 4 seconds
 } 
 })
 .catch((err) => {
 console.error(err);
 });
 });
});

Now for the code page of the two pages. Page one with the form, see my code below.

 import {SuccessfulSubmission} from 'backend/MyForm.js'

SuccessfulSubmission();

Page 2, see my code below.

 import {SuccessMessage} from 'backend/MyThankYouPage.js'

SuccessMessage();

Additional Information:

For some reason when I run the code the custom UI element I created loads immediately even though I didn't fill out the form, which means when I publish the site and go to the thank you page it is not hidden for some reason and does not disappear after 4 seconds.

Thoughts?

I haven't tried submitting the form yet because I'm not ready to try that piece yet.