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
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 
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
