HOW passing dataset – fields value from lightbox to iframe javascript variable

Ask the community
,
1

Explanation of working (point number 1 & 2)
1)Repeater page consists of the following script and when we click to individual container9 – the lightbox gets loaded using the following script
import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ;

export function container9_click_1 ( event , $w ) {
wixWindow . openLightbox ( ‘360’ , $w ( ‘#dataset1’ ). getCurrentItem ());
}

  1. Lightbox has the script and the iframe1.

Lightbox consist the script which helps to connect datasset1 and its fields import { lightbox } from ‘wix-window’ ;
$w . onReady ( () => {
let db = lightbox . getContext ();
});
iframe consists pannellum CSS & JS with html codes to load 360 panoramic image.

Seeking help, HOW passing dataset1 – fields value “url’ from lightbox to iframe javascript variable, objective to replace the url of 360 image in.

Script in Lightbox import { lightbox } from ‘wix-window’ ;
$w . onReady ( () => {
let db = lightbox . getContext ();
let var_url = db.url;
});
Transfer the var_url to iframe java script

1959×1052 152 KB

Warm regards
Sameer Bhargava

2

You will find your answer here…

https://www.wix.com/velo/reference/$w/htmlcomponent/postmessage

3

could not able to crack it…
if some one had done it request to share the example

4

I already answered you in your very first post about your wished functionality, that it won’t be an easy task to generate it.

Your checkpoints are…

  1. get data from DB → using wix-data.
  2. open-lightbox including datatransfer to the lightbox.
  3. get recieved data inside lightbox (getContext).
    LIGHTBOX-CODE: 
$w.onReady( function () {
    let received = wixWindow.lightbox.getContext(); 
    console.log("Received-Data: ", received-Data);
});
  1. Now you have your data and also your HTML-Component inside your lightbox.

IMPORTANT-STEP: —> PAGE-CODE !!!
5)

$w.onReady( function () {
    let received = wixWindow.lightbox.getContext();
    console.log("Received-Data: ", received); 
       
    $w("#myHtmlComponent").onMessage((event) => {
        console.log(`Message: ${event.data}`;
    });   
    
    $w('#button1').onClick(()=>{console.log("SEND");
        $w("#myHtmlComponent").postMessage(received);
    });
});

HTML-COMPONENT-CODE!!!: Like shown in the API-EXAMPLE…

<!doctype html>
<html>
<head>

<script type="text/javascript">
function init () {
  // when a message is received from the page code
  window.onmessage = (event) => {
    let receivedDataFromPage = event.data;
    if (receivedDataFromPage) {
      console.log("Incomming message!");
      console.log("DATA: ", receivedDataFromPage)
      insertMessage(receivedDataFromPage);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
  sendReturnMessage("Message from the HTML Component!");
}

// send message to the page code
function sendReturnMessage(msg) {
  window.parent.postMessage(msg, "http://mysite.com");
}
</script>

</head>

<body onload="init();" style="background-color:lightgray;">
<h1>HTML Component Test</h1>
<p id="demo">Message will go here</p>
</body>
</html>

I wrote this within 10mins and it is not tested, so you will have to COMPLETE it and bring it to working version.

Good luck!

5

Thanks

I cracked it this morning itself, similar to what you guided.
actually, its only works, when we trigger the event through a button click.
still trying to find the solution where the event gets triggered ongertready

import { lightbox } from ‘wix-window’ ;
let db = lightbox . getContext ();
let url_360 = db . url360 ;
$w . onReady ( function () {
$w ( ‘#button2’ ). onClick (() => {
$w ( “#html1” ). postMessage ( url_360 );
$w ( “#text1” ). text = db . location ;
});
});

6 
import{lightbox}from 'wix-window';

let db=lightbox.getContext();
let url_360=db.url360;

$w.onReady(function(){
	//$w('#button2').onClick(()=>{
		$w("#html1").postMessage(url_360);
		$w("#text1").text=db.location;
	//});
});
7

this is a bit uncertain,
I tried this too yesterday. sometime it works, some time it fails to load
thanks again

8

Start to run everything when page is completely ready…

import {lightbox} from 'wix-window';

$w.onReady(function(){
	let db=lightbox.getContext();
	let url_360=db.url360; 	

	//$w('#button2').onClick(()=>{
		$w("#html1").postMessage(url_360);
			$w("#text1").text=db.location;
	//});
});

Another one using some time-delay…

import {lightbox} from 'wix-window';

$w.onReady(function(){
	let data = lightbox.getContext();
	let url_360 = data.url360; 
	$w("#text1").text = data.location;
	setTimeout(()=>{startHTML(url_360);},350);
});

function startHTML(value) {
	$w("#html1").postMessage(url_360value);
}

Does it work better?

9

@CODE-NINJA , I keep seeing you on all my questions :joy: . I was wondering if this would work for me ? I need to close a lightbox after the user clicks a button inside of an Iframe that is inside of a lightbox. Haven’t found any resources for what I need.

10

Iframe inside of same lightbox ?

11

Yes, I have the Iframe with my code inside of a lightbox