How can I pass a Json property value to a LightBox

Ask the community
, ,
1

I have added the below code in “Site Code”

export function bountifierBtn_click(event) {
let sId = “” ;

fetch( “https:
//bountifier
.com/project/details?key=” , { “method” : “get” })
.then( (httpResponse) => {
if (httpResponse.ok) {

return httpResponse.json();
} else {

return Promise.reject( “Fetch did not succeed” );
}
} )
.then(json =>{
sId = json._id.toString();
// console.log(sId);
})
. catch (err => console.log(err));
wixWindow.openLightbox( ‘Pop-up’ , sId);
}

i have added the below code in “Pop-up lightbox code”

import wixWindow from ‘wix-window’ ;

$w.onReady( function () {
let received = wixWindow.lightbox.getContext();
console.log(received); //logs nothing
$w( ‘#text9’ ).text=received; // label is not set to the required value
});

i want to pass the json response object value to a lighbox and store it in a hidden element.

2

Hey Brinda

well done on making this all happen. From what i see there is a slight error on how you send the context in the lightbox

https://www.wix.com/corvid/reference/wix-window.lightbox.html#getContext
You most likely already seen this API documentation but I believe i see you have slightly misunderstood how it functions.

wixWindow.openLightbox('Pop-up', sId);

Is saying to open Pop-up but the context is not defined correctly.
As you can see on their description

wixWindow.openLightbox("MyLightBox", {
    "pageSend1": $w('#pageSend1').value,
    "pageSend2": $w('#pageSend2').value
  })

What is inside the {} define an object where the name “pageSend1” is the reference name and everything after : is the value that name is holding. much like how and Array[1] holds what ever is in the field 2 of an array.

Therefor try writting it like this

wixWindow.openLightbox("Pop-up", {
    "sId": sId
  })

this should result in the sId is being sent as context under the name sId.

And you can now in your lightbox call

console.log(received.sId);

This should result in you seeing you Json.

Hope it helps

3

I made the changes as you mentioned but still I am not able to retrieve the data in the lightBox.

export function bountifierBtn_click(event) {
let sId = “” ;

fetch( “https:
//bountifier
.com/project/details?key=” , { “method” : “get” })
.then( (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
} else {
return Promise.reject( “Fetch did not succeed” );
}
} )
.then(json =>{
sId = json._id.toString();
// console.log(sId);
})
. catch (err => console.log(err));
wixWindow.openLightbox( “Pop-up” , {
“sId” : sId
})
}

in pop-up code

import wixWindow from ‘wix-window’ ;

$w.onReady( function () {
let received = wixWindow.lightbox.getContext();
console.log(received.sId); //logs nothing
$w( ‘#text9’ ).text = received.sId;
});

4

So just realized your copy pasting the code in here … think your misunderstanding how to use API.

“https://bountifier.com/project/details?key=”
is missing the API key.

Remember to console.log everything so you can check where code fails.
So here if you console.log in the promise.reject you will notice it failed.

Stop trying to send a json to your lightbox. and start with simply console.log the result when doing the fetch request.
When you can log the expected result correctly. then go to the next step of sending it to your lightbox.

5

I had passed the correct api key ,just replaced with a text while posting it here,
but anyhow, I got the issue solved ,
Thank you for your reply , it helped me .:slightly_smiling_face:

I changed the code .And now it works.

export function bountifierBtn_click(event) {
let sId = “” ;

[fetch(](fetch("https://bountifier.com/project/details?key=<api) ["https://](fetch("https://bountifier.com/project/details?key=<api)
[bountifier.com](fetch("https://bountifier.com/project/details?key=<api)
[/project/details?key=<api](fetch(“https://bountifier.com/project/details?key=<api) key>” , { “method” : “get” })
.then( (httpResponse) => {
if (httpResponse.ok) {

return httpResponse.json();
} else {

return Promise.reject( “Fetch did not succeed” );
}
} )
.then(json =>{
sId = json._id.toString();
wixWindow.openLightbox( “Pop-up” , {
“sId” : sId
})
// console.log(sId);
})
. catch (err => console.log(err));
}

Thanks again !

6

Great to hear you fixed it.
And good to hear it was not the API key.

Can you clarify what was your solution and mark this thread as Answered :slight_smile: the forum become so nice when you do that and other people might be able to find help in this thread.

7

Site or Page code

export function bountifierBtn_click(event) { let sId = “” ; fetch( "https://
bountifier.com
/project/details?key=<api key>" , { “method” : “get” })
.then( (httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
else {
return Promise.reject( “Fetch did not succeed” );
}
} )
.then(json =>{ sId = json._id.toString();
wixWindow.openLightbox( “Pop-up” , {
“sId” : sId
})
// the openLightBox method works more accurately when placed inside “then” than placing that method after catch
})
. catch (err => console.log(err));
}

Lightbox code

import wixWindow from ‘wix-window’ ;

$w.onReady( function () {
let received = wixWindow.lightbox.getContext();
console.log(received.sId);
// logs the sent value from page /site which can be accessed in lightbox.
$w( ’ #text9 ’ ).text = received.sId;
});