[Solved] Lightbox API

Ask the community
,
1

Hi,
I’d like to pass values to a lightbox. To do so, I consult the Lightbox API and specifically the code example found there which I copy here for your convenience:

1/*************
2 * Page Code *
3 *************/
4
5import wixWindow from 'wix-window';
6
7export function openButton_click(event) {
8  wixWindow.openLightbox("MyLightBox", {
9    "pageSend1": $w('#pageSend1').value,
10    "pageSend2": $w('#pageSend2').value
11  })
12  .then( (data) => {
13    $w('#pageReceive1').text = data.lightBoxSend1;
14    $w('#pageReceive2').text = data.lightBoxSend2;
15  } );
16}
17
18
19/*****************
20 * Lightbox Code *
21 *****************/
22
23import wixWindow from 'wix-window';
24
25$w.onReady( function () {
26  let received = wixWindow.lightbox.getContext();
27  $w('#lightBoxReceive1').text = received.pageSend1;
28  $w('#lightBoxReceive2').text = received.pageSend2;
29} );
30
31export function closeButton_click(event) {
32  wixWindow.lightbox.close( {
33    "lightBoxSend1": $w('#lightBoxSend1').value,
34    "lightBoxSend2": $w('#lightBoxSend2').value
35  } );
36}

My scenario is this: I’ve written an essay with say 10 footnotes. I provide the full text in my webpage along with a number in parentheses (which is a textbox named #fn252) which the user clicks and a lightbox opens that gets the value of the textbox clicked and displays (through a database prepared for that reason) the corresponding footnote. For example:

User visits the page, starts reading and bumps on the Footnote #252:

https://www.screencast.com/t/aGrrEAPHrab1

The user clicks on it and a lightbox pops-up:

https://www.screencast.com/t/GtsDvz5zLsfI

I want the value of the textbox above (252 in this case) to pass to that Lightbox text element (footnoteId) and then according to a database filter, the footnote text box below to get the actual footnote text from the database, as structured here:

https://www.screencast.com/t/UV9ZHVxn

So I tried to make some modifications to the Velo Code Example and I’d kindly like your opinion/advice about its correctness.

1/*************
2 * Page Code *
3 *************/
4
5 import wixWindow from 'wix-window';
6
7 export function fn252_click(event) {
8 wixWindow.openLightbox("bookFootnotes", {
9    "pageSend1": $w('#fn252').value,
10   })
12  
19/*****************
20 * Lightbox Code *
21 *****************/
22
23 import wixWindow from 'wix-window';
24
25 $w.onReady( function () {
26  let received = wixWindow.lightbox.getContext();
27  $w('#fnIdReceive').text = received.pageSend1;
28  } );
30

My approach above has problems. In Preview mode, Lightbox opens but the correct value (252) does not pass to the assigned field but some other value loads from the dataset. In Live mode, the Lightbox opens again but with no values at all, whatsoever.

You can check the live site here, containing the pics above:

https://www.civilitas.gr/immigration-history-4251

Any ideas please?

2

You want to send something to lightbox?

https://russian-dima.wixsite.com/meinewebsite/lightbox

3

Combining info from your site and VeloReference, I managed to pass data to lightbox. Now I would like your help to the next step: how can I make these data that passed to the lightbox, to trigger an action in a Database Collection of the lightbox? As I say above, I pass the text ‘252’. How can I tell to the dataset to go fetch the record with the Primary Key of ‘252’ and show the contents?

I ask this because when I console this, I get Null:

let item = $w("#datasetFN").getCurrentItem();
             console.log(item);

Why the #datasetFN is not loaded in the lightbox?

4

@gemats
Did you also used …?


$w("#myDataset").onReady( () => {
  console.log("The dataset is ready");
});

$w("#myDataset").onReady( () => {
  console.log("The dataset is ready");
  let item =$w("#datasetFN").getCurrentItem();
  console.log(item);
})
5

@russian-dima Yes did all that, I had a problem telling my Dataset to look in the dropdown to filter itself. Finally I bypassed it by entering by hand all footnote values in the values list of the dropdown, and then I used $w( “#mydropdown” ).value = subE (where subE is your " let subE = session.getItem( ‘footnote’ );" from the “page” code and it works.

Optimally, I believe I shouldn’t have manually written all footnote values in the dropdown value list in order for the Dataset to find the proper one according to user onClick, but this is all I can do at the moment.

Thanks once again!

6

@gemats
Till now you could solve almost all your problems (by using your own brain). I am sure! —> If you want, you also will be able to improve your own code. You have a good logical way of thinking.

Keep it like this! (and don’t forget to use CONSOLE) :wink:

Good luck and happy coding.

7

@russian-dima You have been supporting me to all my questions, all this time and you made me try harder when I was ready to quit. Now my project has grown very big, mostly because of your help (and others too of course). I wish I have the time in the future to re-write my first parts of my project in a more efficient and clever way.

Thank you :slight_smile:

8

@gemats
Yes, i know exaclty what you mean. The more you work with CODING–> the more you want a proper and as most as possible short, flexible & effective CODE-Snipet :sweat_smile:.

And as you already recognized it well, your code-skills will always improve a little bit, with every code-line, which you create/write.

By the way, i learned the same way. If you want to learn even more effective,
then start to help other with their coding issues. You will learn faster and into every direction of coding (360°-CODING) <— slogan of my futured website??? Who knows :rofl:.

9

edit: Velo Reference examples and your example are about input values . How to code if I want to pass the value of a text element? I don’t need input values. I believe this is my problem.

@russian-dima A last minute problem, need your help. All seem to work ok but when I add more footnotes (=more onClick data that pass to lighbox), Lightbox seems “not to refresh” previous value and I have to exit and re-open the lightbox to show the correct values.

edit:
this is my PAGE code:

import {session} from 'wix-storage';
import wixWindow from 'wix-window';
import wixData from 'wix-data';

export function closeIntroParagraph_click(event) {
    $w("#box104").collapse();
    $w("#image11").collapse(); 
}

$w.onReady(function () {

$w("#txtSynoptiki").onClick(event => {
 if( $w("#box106").collapsed ) {
            $w("#box106").expand();
}
 else {
        $w("#box106").collapse();
    }
});

$w("#txtAitiologiki").onClick(event => {
 if( $w("#box105").collapsed ) {
            $w("#box105").expand();
}
 else {
        $w("#box105").collapse();
    }
});
  });

export function fn249_click(event) {
    session.setItem('footnote', $w("#fn249").text);
    setTimeout(()=>{wixWindow.openLightbox("bookFootnotes");},350) 
}

export function fn250_click(event) {
    session.setItem('footnote', $w("#fn250").text);
    setTimeout(()=>{wixWindow.openLightbox("bookFootnotes");},350)
}

export function fn252_click_1(event) {
    session.setItem('footnote', $w("#fn252").text);
    setTimeout(()=>{wixWindow.openLightbox("bookFootnotes");},350)
}

And this is the LIGHTBOX code:

import {session} from 'wix-storage';
import wixData from 'wix-data';
import wixWindow from 'wix-window';


$w.onReady(function () {

    fillFootnote();

function fillFootnote (){
 let subE = session.getItem('footnote');
    $w("#fnIdReceive").value = subE;
 let val = $w("#fnIdReceive").value;
    console.log("Dropdead value is,", val)
    $w("#txtFootnoteId").text = val;
}
});

export function closeLightbox_click(event) {
    $w('#fnIdReceive').value = null;
    $w('#fnIdReceive').resetValidityIndication(); 
    session.removeItem("footnote");
    wixWindow.lightbox.close();
}

#fnIdReceive is a dropdown menu because I want to filter the dataset based on ‘dropdown values’ in the Editor. Any cleverer way?

Could you please check the LIVE site?
https://www.civilitas.gr/immigration-history-4251

Expand the boxes and play with 249, 250 and 252 see what happens.

10

@gemats
I did not understand what you wanna do with your dropdown?

https://www.media-junkie.com/lightbox-sample

import {session} from 'wix-storage';
import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {
    $w("#fn249").onClick(event => {
        session.setItem('footnote', $w("#fn249").text);
        setTimeout(()=>{wixWindow.openLightbox("bookFootnotes");},350) 
    })


    $w("#fn252").onClick(event => {
        session.setItem('footnote', $w("#fn252").text);
        setTimeout(()=>{wixWindow.openLightbox("bookFootnotes");},350)
    })
})

$w.onReady(function () {
 //Fill note -----------------------------------------
    fillFootnote();

 //Closing Lightbox-----------------------------------
    $w('#closeLightbox').onClick(()=>{
 //  $w('#fnIdReceive').value = null;
 //  $w('#fnIdReceive').resetValidityIndication(); 
        session.removeItem("footnote");
        wixWindow.lightbox.close();
    })
});

function fillFootnote (){
 //Text-Fill-------------------------------
 let subE = session.getItem('footnote');
    $w("#txtFootnoteId").text = subE;

 //Dropdown-Fill---------------------------
//  $w("#fnIdReceive").value = subE;
//  et val = $w("#fnIdReceive").value;
//  console.log("Dropdead value is,", val)
}
11

@russian-dima Inside the Lightbox, I have a dataset, containing 2 columns, the footnote number and the footnote text. When the user clicks on any footnote number (text element) in my main Page, I want this number to be passed to the lightbox and this number to be the filter of the dataset in order to load the e.g. 249, 250, whatever footnote text.

To do this, I thought to pass the value of the main Page to a hidden dropdown menu in the Lightbox and then go to Dataset settings and say “filter based on a dropdown value”, having in mind to change the dropdown value dynamically every time with every click. This works but strangely and unpredictably.

Could you suggest a better way @russian-dima , or even give me a few lines of code? It’s very important for me to be able to load footnote text in the Lightbox when a user clicks on a footnote number in the main Page. I also checked the link you provided with my text. I can click on the footnote numbers but nothing happens, at first sight. What did you try to say with that?

12

@gemats
Read the messages in the chat (on my site). I will come back later and i will take a look again on it. See you.:wink:

13

Here another try…
https://www.media-junkie.com/lightbox-sample

Page-Code

import {session} from 'wix-storage';
import wixWindow from 'wix-window';
import wixData from 'wix-data';

var DATASET = "#dataset1"
var REFERENCE = "footnoteNumber"
var DROPDOWN = "#fnIdReceive"
var TABLE = "#table1"

$w.onReady(function () {
    $w(DATASET).onReady(()=>{
        $w("#fn249, #fn250, #fn252, #fn253, #fn255, #fn256").onClick(event => {
 let VALUE = event.target.id
            console.log("VALUE = ", VALUE)
 let filter =  wixData.filter()  
 
    filter = filter.eq(REFERENCE, VALUE)

    $w(DATASET).setFilter(filter).then(()=>{
        console.log(filter)
        $w(TABLE).refresh();
    })
 
        session.setItem('footnote', VALUE);
        setTimeout(()=>{wixWindow.openLightbox("bookFootnotes");},350)
        })
    })
})

Lightbox-Code

import {session} from 'wix-storage';
import wixData from 'wix-data';
import wixWindow from 'wix-window';

var DATASET = "#dataset1"
var REFERENCE = "footnoteNumber"
var DROPDOWN = "#fnIdReceive"
var TABLE = "#table1"

$w.onReady(function () {
    $w(DATASET).onReady(()=>{
        let VALUE = session.getItem('footnote');
        let filter =  wixData.filter()  
 
        filter = filter.eq(REFERENCE, VALUE)

        $w(DATASET).setFilter(filter).then(()=>{
            console.log(filter)
            $w(TABLE).refresh();
        })  
    })

 //Closing Lightbox-----------------------------------
    $w('#closeLightbox').onClick(()=>{
 //  $w('#fnIdReceive').value = null;
 //  $w('#fnIdReceive').resetValidityIndication(); 
        session.removeItem("footnote");
        wixWindow.lightbox.close();
    })
})

I hope this will help you :sweat_smile:

On page and on LightBox a DATASET can be found (“dataset1”).

DATABASE:

761×587 29.7 KB

14

@russian-dima Copied your code to my site, added the new elements (table, dataset), I renamed what it had to be renamed and to my end it ONLY runs in PREVIEW where it opens the correct footnote for the corresponding click . In LIVE it’s erratic. It either won’t load any data at all or it may load some other footnote than the one I clicked or it will get stuck loading the footnote I clicked first… (???).

I see that in your site it works like a charm. So I started comparing your setup with mine.

Sandbox/Live properly synced. Database collection has no fancy permits in my side. I run no other code for the moment, just your code in both pages. Also no other active elements doing any sort of interaction with anything. I also checked the “fetch after the page loads” checkbox in Dataset settings. I have just plain pages…

I’m scratching/banging my head to find some sanity with this one…

edit 1: ran your site and my site in parallel, in two different tabs with Debugger screens open. Started clicking the footnotes one by one. First, 249, to your site, then to mine, nothing to worry. Then , footnote 250, flying colors in your site, red error message to mine:

https://www.screencast.com/t/6tRjbK4Iasd

Yellow arrow shows that I clicked 250. But 249 value is loaded as shown by the red arrow. And then, why/where is my Lightbox still open? Isn’t the wixWindow.lightbox.close(); enough?

edit 2 : After further investigating, I see that the code runs twice in my site and once at yours, @russian-dima . This is what happens when I click on any footnote, here the 250:

https://www.screencast.com/t/sv6IbTTvZnQ

So if the code runs twice, then somehow the Lightbox must remain open in my end. (???)

15

@gemats
I would suggest you to create a fully new site to test it completely separately (out of your project). And when you still have some troubles, you can write here again.

16

@russian-dima The text boxes (249, 250, 252) caused all this trouble in the first place. I deleted them, added new text boxes with the same attributes, properties, names, labels, etc, and they worked (=things stopped to load twice).

Is there such a concept as ‘corrupt text box’? Who knows, most probably there is.

Thank you very very much for all your efforts and time to solve my problems but once again, it seems that I’m not (completely) lunatic. :slight_smile:

17

As i already said, normaly you are skilled enough to solve your code-problems. It is all about investing enough of time and brain :joy: