Database table cells link to certain lightboxes

Ask the community
,
1

I have a database of college football players and information regarding them. I also have lightboxes already created for each of the players with a paragraph and image about the player. I created a table that reads from the database and displays information about each player. I am trying to set it up so that when a user clicks on an image in the table that corresponds to the player, that the lightbox corresponding to said player will pop up. If it is easier, I am fine with having the player name go to the lightbox when clicked instead. I have some experience with code, but not with wix. This is what I have right now for the code on the page with the table (sorry if its not even close).

import wixWindow from ‘wix-window’ ;

$w( “#table1” ).onCellSelect( (event) => {
let cellData = event.cellData;
if (cellData === “Trevor Lawrence” ) {
wixWindow.openLightbox( “trevorLawrence” )
}
if (cellData === “Justin Fields” ) {
wixWindow.openLightbox( “justinFields” )
}
// etc…
} );

This code would be for clicking the name, but the image would work better, but I was unsure how to do that. I attached a picture of the table. When the “report” section is clicked (first attached image) I would like the appropriate lightbox to pop up. Just to be clear, I have the lightboxes already made and they don’t read from the database. I can change it if that is the only way to make it work though. I would appreciate any help! Thanks :slight_smile:

2

Greetings,

Keep the settings the same where clicking selects the cell rather than the row. You can get at the row data that way with a couple lines of code.

$w("#table1").onCellSelect( (event) => {
 let rowIndex = event.cellRowIndex;
 let rows = $w("#table1").rows;
 let name = rows[rowIndex].name;
 // then handle the lightbox opening logic from here.
} );
3

Thank you very much! I changed the setting so that it selects a cell rather than a row. I used the following as suggested for my code:

import wixWindow from ‘wix-window’ ; $w( " #table1 " ).onCellSelect( (event) => { let rowIndex = event.cellRowIndex; let rows = $w( " #table1 " ).rows; let name = rows[rowIndex].name; // then handle the lightbox opening logic from here. wixWindow.openLightbox(name) } );

I changed all my lightbox names so that they were the exact same as what the name variable should be but the lightboxes still didn’t pop when clicked. I also tried doing it like before where it was more hard coded, using
if (name === “Trevor Lawrence” ) {
wixWindow.openLightbox( “trevorLawrence” )
}
and
if (name.equals( “Trevor Lawrence” )) {
wixWindow.openLightbox( “trevorLawrence” )
}

but none worked for some reason :confused: . I may be missing something.

4

import wixWindow from ‘wix-window’ ;

$w( “#table1” ).onCellSelect( (event) => {
let rowIndex = event.cellRowIndex;
let rows = $w( “#table1” ).rows;
let name = rows[rowIndex].name;
// then handle the lightbox opening logic from here.
wixWindow.openLightbox(name)
} );

sorry, here is the properly formatted code

5

You could rename the lightboxes to the actual name “Trevor Lawrence”, “Justin Fields”, etc. Unlike names of collection fields and elements, Lightboxes accept spaces in the name.

Also, I was guessing that the field name (key) of “name” is lower case. Is it?

6

I read up on the “name” function and it appears it has to do with detecting errors. I am going to keep working and see if I can figure it out. No luck yet though.

7

Actually, I just realized that my code is actually never even entering the onCellSelect() function. I put a console.log(“Start”) before the function call, and a console.log(“cell clicked”) immediately after it enters on the onCellSelect(), and only the start will ever appear, even after clicks. Interesting…