Lightbox passing data to a page

i created a page that call a lightbox (some thing like a “wellcome, please insert your name”).
In the lightbox, the input text find item in my database (ex.: the user´s name).
from a res.items;
everything is ok but…

How can i show this item in the page that is behind the lightbox?
Can i pass it res.items to a page that callled the lightbox

Sorry for my english, but… please, help me…

Hi,

Take a look at the openLightbox API documentation to see how to pass data to a Lightbox, and the Lightbox.close() API function which explains how information is passed back to the calling page.

Good luck,

Yisrael

TThanks. but… are there some examples? i dont know how to do it.

---- In mylightbox:

export function button2_click() {
const input = $w(‘#textInput1’).value;
wixData.query(‘DATA’) // DATABASE NAME
.eq(‘NAME’, input) // COLLUM NAME IN THE DATABASE
.find().
then(res => {
let yourItem = res.items;
$w(‘#HI’).text = “HI” + yourItem[0].title + “!”;
const dataObj = {
yourItem };
setTimeout(function(){ wixWindow.lightbox.close(dataObj); }, 3000);

---- in My Page (that was behind the lightbox):

wixWindow.openLightbox(“SUPORT”)(dataObj => { // SUPPORT IS THE LIGHTBOX´S NAME
??? // HOW CAN I CALL THE yourItem[0].title here like $w(‘#HI’).text = “HI” + yourItem[0].title + “!”; ?
});

HELP ME PLEASE!

See the openLightbox() function for detail.

It has an example which you can use to get started:

wixWindow.openLightbox("LightboxName")
  .then( (data) => {
     let receivedData = data;
  } );

Good luck,

Yisrael

Thanks for your help. I got it.
That was the way:
When I try to open a page, my lightbox pop-up in front of it and ask for a data for compare with my database (ex. name).
So, If the user put the correct name, i will close the lightbox and pass the database´s line (with the name and another datas) to the page.

In the lightbox:

import wixWindow from 'wix-window';
import wixData from 'wix-data';

export function button2_click() {
   const input = $w('#inputYourEmail).value; // lets ask for the user put the email - the same that I have in the my database. It could be a number, or another data, etc.
   wixData.query('DATA') // lets call the data base by name. in my case, the name is 'DATA'
   .eq('EMAIL', input) // I compare if the email that user put is the same that i have in my data base
   .find().
       then(res => {
       const yourItem = res.items; (  // i find the line in my database that have the same email, and now, i can call my user by the name, if i want it, and i do it, in the next line...
       $w('#HI').text = "HI" + yourItem[0].title + "!";  //the name is printed in the screen 
     setTimeout(function(){ wixWindow.lightbox.close(yourItem); }, 3000); // i set a time out to close the lightbox, and it will pass the data ( yourItem ) to the page, in 3... 2... 1.. GO...

In The page that was above the Lightbox…

import wixWindow from 'wix-window';

$w.onReady( function () {

        wixWindow.openLightbox("suport").then(yourItem => { // lets open the lightbox and receive data ehwn its closed. The data may be the same that i was in the light box. In that case, its called "yourItem"  
	$w('#hi').text = "Hello" +  yourItem[0].title + "!"; // let print inthe page. The title is the name´s user in my data base.
	});
  
} );

Sorry for my english, and i hope that i could help somebody… bye!

Glad you got it working, and glad I was able to help.

Have fun!

Hi Yisrael,

Is the ‘LightBoxName’ the exact name we titled the Lightbox/item ID in the properties panel? I have a checkbox with an onClick event triggering a Lightbox to open but it says ‘no item with that title’ in console. Maybe the checkbox can’t open a Lightbox?


CODE:

export function newAddressTick_click(event, $w) {
wixWindow.openLightbox(“addressLightbox”)
}

It must be something basic. Any insight is much appreciated. Thank you.

-Nelson

Yes, you open the Lightbox using its exact name. Is “addressLightbox” the exact name?

Please post the URL of your site. Only authorized Wix personnel can get access to your site in the editor.

Yes, that is the item ID of the Lightbox. Thanks for the quick response Yisrael.

cfofirsteliteltd.wixsite.com/thehottestspots/hotspot-creator

As I stated - you need to use the name of the Lightbox, not the ID.

Not this:
wixWindow.openLightbox(“#addressLightbox”)
But this:
wixWindow.openLightbox(“Address”);

Also, you have errors in the code:


You close() a Lightbox in the Lightbox code itself, not from the code of the parent page.
You don’t have newAddress defined which causes an error message.

Thanks Yisrael. But that is not the event I was referring to. I haven’t completed coding that event as of yet. It is the one under that one, “newAddressTick”…

But I got it working anyway! I had a “#” before the Lightbox Title/Name. I am not a coder and simple things like this still get me some times. I’ve learned every bit of coding I know straight from here through Wix Code so my syntax awareness is still kinda rough. But I was confused as to whether I should be referring to item ID or Lightbox Name on event. I had placed a “#” when I was trying item ID after unsuccessfully trying the Lightbox Name over and over and forgot to delete. For some reason it wasn’t working initially. I had to refresh my editor.

But thanks for looking into it Yisrael! I always highly value your insight and response time, not to mention your posts!! You’ve helped me tremendously throughout my journey. Thanks again.

For other amateur Wix Coders reading,
How to Open a Lightbox onClick Event: Here’s the code…

//do not use itemID for reference, which is the ID name you assign an item in Properties Panel. Use the actual Lightbox Name itself, from your Lightboxes Section on your Page Manager. You can change it by double clicking on the name of the Lightbox in the Page Manager, or within the Settings tab when you have the Lightbox open and click on it to bring up your Settings options.

export function newAddressTick_click(event, $w) {
wixWindow.openLightbox(“LightboxTitle”)
}

This is where you find Lightbox Name in your
Page Manager:
Either double click on name to change, or click on the 3 dots/settings.

OR

This is where you can also change the name, within the settings of the Lightbox itself when pulled up and clicked on:

Hope this helps others as well.

  • Nelson

Hey Nelson, I’m glad to help - or at least try.