Closing a lightbox if database submission returns an error

Hi!

I’m trying to show a loading screen (lightbox) after the user submits a form, before being redirected to his submission page, on my website.
I have managed to do that, only if the user forgets to fill in an input, the database returns an error, and can’t submit the content. So far nothing wrong. But I want the loading screen (lightbox) to automatically close so the user can fill the missing inputs.

Basically I need a piece of code that would say "on submission button click = display loading screen; if database returns an error = loading screen hide;

Here’s my code so far.

import wixData from "wix-data";
import wixWindow from 'wix-window';
import {sendEmail, sendEmailWithRecipient} from 'backend/email';

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        const msg = $w("#dataset1").getCurrentItem();
            $w("#html1").onMessage((event) => {
                if (event.data === "ready") {
                    $w("#html1").postMessage(msg.longDescription);
                    //sends out an email when deal is posted
                    $w("#dataset1").onAfterSave(sendFormData);
                }
            });
    $w("#html1").onMessage((event) => {
        //Set the value for the rich text field of the dataset's
        //current item to be the data in the HTML element
        const dataWithFixedLinkStyles = event.data.replace(/\<a/g, `<a             style="color:#006bd7; text-decoration: underline;"`);
        $w('#dataset1').setFieldValue("descriptionDeal", dataWithFixedLinkStyles)
            .then((res) => {
               $w("#dataset1").save();
                //shows loading screen upon submitting content
                wixWindow.openLightbox("Chargement");
            });
        });
    });
});

export function button15_click_1(event, $w) {
//Send a blank message to the HTML element. This tells the HTML
//element you want it to send you its contents
$w("#html1").postMessage("save");
//Receive the message from the HTML element
}

Thanks!

One thing that I see is that setFieldValue() does not return a Promise. Although I haven’t gone over all of the code logic, you probably need something more like this:

$w('#dataset1').setFieldValue("descriptionDeal", dataWithFixedLinkStyles);
 $w("#dataset1").save();
//shows loading screen upon submitting content
wixWindow.openLightbox("Chargement");

1 Like

Hi,

When I apply your code and swtich to preview mode, it seems to automatically save and all fields return an error and the loading screen shows.

Here is the full code in case you need it :

Here is the full code in case you need it :

import wixData from "wix-data";
import wixWindow from 'wix-window';
import {sendEmail, sendEmailWithRecipient} from 'backend/email';
$w.onReady(function () {
//set a  digit random number as a reference field
unixCode();
function unixCode (){
var timeStamp = Math.floor(Date.now()/1000);
$w('#input11').value = timeStamp.toString();
}
$w("#dataset1").onReady(() => {
const msg = $w("#dataset1").getCurrentItem();
$w("#html1").onMessage((event) => {
if (event.data === "ready") {
$w("#html1").postMessage(msg.longDescription);
//sends out an email when deal is posted
$w("#dataset1").onAfterSave(sendFormData);
}
});
$w("#html1").onMessage((event) => {
//Set the value for the rich text field of the dataset's
//current item to be the data in the HTML element
const dataWithFixedLinkStyles = event.data.replace(/\<a/g, `<a style="color:#006bd7; text-decoration: underline;"`);
$w('#dataset1').setFieldValue("descriptionDeal", dataWithFixedLinkStyles)
.then((res) => {
$w("#dataset1").save();
});
});
});
});

second part (it wouldn’t let me post some of it for some reasons)



export function button15_click_1(event, $w) {
//shows loading screen upon submitting content
wixWindow.openLightbox("Chargement");
//Send a blank message to the HTML element. This tells the HTML element you want it to send you its contents
$w("#html1").postMessage("save");
//Receive the message from the HTML element
}

bump!

bump!