Link between a page and a lightbox

Question:

Hello everyone

let me expost to you my problem: I have a main page and a lightbox which is displayed on this same page. (by calling it with a button)
I would like changes to be made to my principal page immediately from this lightbox, and a dynamic interaction between the main page and the lightbox.
For example: display a collapse section on this main page by clicking on a button in the lightbox, activate a field, refresh a repeater on the principal page from data entered on the lightbox, etc

And i would like the page to be refreshed (without closing the lightbox)

Thank you for your help.

Product:
Wix Editor

What are you trying to achieve:
Modify a page from a lightbox

yuo could possibly use

https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/post-message

and

https://dev.wix.com/docs/velo/api-reference/$w/html-component/on-message

Thanks for your answer, but sorry, i don’t iunderstand how?
Here below a printscreen of what i’d like to do :

If i click on the “plus” button (so new value: 6) : i would like that the data on mly page also changes to 6. (Refresh my table)

What code have you tried ?

When my Lightbox appears, , it retrieves the corresponding quantity values for each component present in the CMS (car, camping-car, electricity, etc 
)

When i click pon the button “PLUS” , for example ELECTRICITY, he modifies data in table (add if not present, modify if still present - not at 0): That works perfectly : the data are updated in the CMS. I’d just like that the table (or repeater) to be refreshed.
Actually, i’m obliged to refresh manually by the button (after closing the lightbox) near my table on the page

Here my code:

$w(‘#Electricte’).onClick((event) => {

$w(‘#ChoixPresta’).value=“Branchement Ă©lectrique”

//RECUPERER LE TARIF DE LA PRESTATION
wixData.query(‘MesPrestations’)
.eq(“prestation”, $w(‘#ChoixPresta’).value)
.find()

.then(async (results) => {
    console.log(results.items[0]);
    var Tarif = results.items.map(item => item.tarif)

    if (results.length > 0) {
        
            // INCREMENTER DE +1
            $w('#NbElec').value=String(Number($w('#NbElec').value)+1)
            $w('#TotalElec').value=String(parseFloat(Number($w('#NbElec').value)*Number(Tarif)).toFixed(2))
            $w('#button134').enable()
    } else {
         console.log("Aucune prestation correspondante")
    }

             //VERIFIER ENSUITE SI LE SUPPLEMENT POUR CETTE RESERVATION EXISTE DEJA DANS LA TABLE 
            wixData.query('Supplements')
            .eq("supplement", $w('#ChoixPresta').value)
            .eq("rfrenceRservation", $w('#NumeroReservation').value)
            .find()

            .then(async (results2) => {
                console.log(results2.items[0]);

                if (results2.length > 0) {
                //MODIFIER SUPPLEMENT BRANCHEMENT ELEC DEJA PRESENT DANS LA TABLE DETAILS SUPPLEMENTS
                console.log("ELEC déjà présent pour résa N° "+$w('#NumeroReservation').value+" : ON MODIFIE QUANTITE + TOTAL")

                    const MAJSupplement = results2.items.map(item => ({ ...item, quantite: Number($w('#NbElec').value),montant:String(parseFloat(Number($w('#TotalElec').value)).toFixed(2))}))
                    await wixData.bulkUpdate('Supplements', MAJSupplement);

                } else {
                //AJOUT du SUPPLEMENT BRANCHEMENT ELEC DANS LA TABLE DETAILS SUPPLEMENTS

                console.log("ELEC NON présent pour résa N° "+$w('#NumeroReservation').value +" : ON LE RAJOUTE")

                    let toInsert = {
                        "supplement":"Branchement électrique",
                        "tarif":Number(Tarif),
                        "quantite":Number($w('#NbElec').value),		
                        "montant":parseFloat(Number($w('#NbElec').value)*Number(Tarif)).toFixed(2),
                        "rfrenceRservation":$w('#NumeroReservation').value                
                        
                    }; 
                        wixData.insert("Supplements",toInsert)
                        .then((item)=>{
                        console.log(item)	
                        })  
                }
            })
 }) 

})

Why do you need to see the page at the same time


If show current amounts within the light box view, then you will have all the data in front of you.
You can then just update the cms/dataset the page is using within the light boxes / code or use the light boxes close api to send data back to the page

This section of my page is collapsed, and if i refresh the page afer closing the lightbox, my section will not appear, and i want to stay on this section with results refreshed.

so you are totally right when you say :

> You can then just update the cms/dataset the page is using within the light boxes / code or use the light boxes close api to send data back to the page

but how to?

Actually i use this code to refresh my dataset

import wixWindowFrontend from ‘wix-window-frontend’;
import wixData from ‘wix-data’;

export function EnregistrerModifs_click(event) {
wixWindowFrontend.lightbox.close()
.then(() => {
$w(‘#Supplements’).refresh()
.catch((error) => {
console.error(“Impossible d’actualiser les supplĂ©ments clients:”, Erreur);
});
})
.catch((error) => {
console.error(“Failed to close lightbox:”, error);
});
}

Thanks

It is a little complicated.

When I open a a lightbox that is used to edit data on a page. ( I use Dashboard pages)

This example will add a DJ .

In the page code. we open the lightbox with a promise to do the refresh() when the lightbox is closed. ( I probably should use the confirmed success here but don’t)

 // Bind Add Button Click
    $w('#AddDJ').onClick(() => {
        wixWindow.openLightbox("Add DJ")
            .then(() => {
                $w('#djInfo').refresh(); // Refresh the repeater dataset
            });
    });

We do our updates to the dataset and close the lightbox, which triggers the refresh on the page.

 // Handle form update
    $w('#buttonUpdate').onClick(() => {
        const newEntry = {
            djName: $w('#DjanmeInput').value,
            name: $w('#nameInput').value,
            showGenre: $w('#genreInput').value,
            shortDescription: $w('#shortDescriptionInput').value,
              ....... other code not shown in this example...
        };

        wixData.insert('DJInfo', newEntry)
            .then((insertedItem) => {
                console.log('New entry added:', insertedItem);
                lightbox.close({ success: true });
                

            })
            .catch((err) => {
                console.error('Failed to add entry:', err);
            });
    });

This example is inserting new data but you would use the update api.

1 Like

Hello.
Wonderful!!
That was exactly what i was looking for. it works perfectly : my dataset is updated on the lightbox closing.
Thank you veru much and have a nice day :slight_smile:

1 Like

Hello just another question please:

My dataset is being refreshed : that is ok, but not my fields linked to this dataset even if i asked to be refreshed: it doesn’t retrieve last data upadted, but the penultimate update.
I would like that the data (already refreshed in the collection and the dataset and the table – Ok ) to be displayed in fields.

Here my code after closing the the lightbox:

    wixWindowFrontend.openLightbox('Ajout Suppléments')    
    .then(() => {

         wixData.query('Reservations')
        .eq("ReferenceReservation", $w('#NumResa').value)
        .find()
        .then(async (results) => {

            if (results.length > 0) {

                var Tarif = results.items.map(item => item.ARegler)
                var SUPP=results.items.map(item => item.totalSupplements)

                console.log ("Réservation trouvée : "+$w('#NumResa').value)
                console.log ("Total A REGLER à répercuter : "+ Tarif)
                console.log ("Total SUPPLEMENTS à répercuter : "+SUPP)
                

                //Rafraichir DATASET SUPPLEMENT
                $w('#SupplementsResa').setFilter(wixData.filter()
                .eq("ReferenceReservation", $w('#NumResa').value))
                $w('#SupplementsResa').refresh()


                //Rafraichir DATASET RESA EN COURS
                $w('#ResaEnCours').setFilter(wixData.filter()
                .eq("ReferenceReservation", $w('#NumResa').value))
                $w('#ResaEnCours').refresh()
            

            } else { 
                console.log("Pas de réservation correpondant au N°"+$w('#RefResa').value)
            }
        })      
    })

Thank you

Last question answered and solved here


Refresh data on the page which have been modified in collection - #2 by Mark_Hunte.

1 Like