[SOLVED] Change an image src to that of an image from a table

Ask the community
,
1

Alas, I need assistance. To keep this short and sweet, I am working on a trading card game database. What I want to do is by using the onRowSelect() function, I want to update an image’s src to the src of an image from the selected row.

1920×1040 305 KB

So, in this snapshot, if I was to click on the row where it shows the card “Dustrog Crystals”, the image of the card “Rokah” (enlarged above) would update to Dustrog Crystals.

Make sense?
Everything else in my code works fine, but I’m not too sure how to implement this. Any assistance would be greatly appreciated!

Here’s my code as of writing this post. It’s not entirely complete, as the code is a WIP, but essentially all I need assistance with is the onRowSelect() function.


import wixData from 'wix-data';

const databaseName = 'CardDatabase';
const databaseField = 'planet';
const databaseField2 = 'cardType';
const databaseField3 = 'stars';
const databaseField4 = 'rarity';
const databaseField5 = 'power';
const databaseField6 = 'health';
const databaseField7 = 'newField'
const fieldTitle = 'title';

let debounceTimer;
 
$w.onReady(function () {

    $w('#input1').onInput((event) => { 

    })
 
 //Planet Type Checkbox onChange event
    $w('#checkboxGroup1').onChange((event) => {
        const selectedBox = $w('#checkboxGroup1').value; //Planet Type
        const selectedBox2 = $w('#checkboxGroup2').value; //Card Type
        const selectedBox3 = $w('#checkboxGroup3').value; //Rarities
        const dropDown = $w('#dropdown1').value;
        const minPower = $w('#minPower').value;
        const maxPower = $w('#maxPower').value;
        addItemstoRepeater(selectedBox, selectedBox2, dropDown, selectedBox3, minPower, maxPower);
    })

//Card Type Checkbox onChange event
    $w('#checkboxGroup2').onChange((event) => {
        const selectedBox = $w('#checkboxGroup1').value; //Planet Type
        const selectedBox2 = $w('#checkboxGroup2').value; //Card Type
        const selectedBox3 = $w('#checkboxGroup3').value; //Rarities
        const dropDown = $w('#dropdown1').value;
        const minPower = $w('#minPower').value;
        const maxPower = $w('#maxPower').value;
        addItemstoRepeater(selectedBox, selectedBox2, dropDown, selectedBox3, minPower, maxPower);
    })

    $w('#checkboxGroup3').onChange((event) => {
        const selectedBox = $w('#checkboxGroup1').value; //Planet Type
        const selectedBox2 = $w('#checkboxGroup2').value; //Card Type
        const selectedBox3 = $w('#checkboxGroup3').value; //Rarities
        const dropDown = $w('#dropdown1').value;
        const minPower = $w('#minPower').value;
        const maxPower = $w('#maxPower').value;

        addItemstoRepeater(selectedBox, selectedBox2, dropDown, selectedBox3, minPower, maxPower);
    })

    $w('#dropdown1').onChange((event) => { 
        const selectedBox = $w('#checkboxGroup1').value; //Planet Type
        const selectedBox2 = $w('#checkboxGroup2').value; //Card Type
        const selectedBox3 = $w('#checkboxGroup3').value; //Rarities
        const dropDown = $w('#dropdown1').value;
        const minPower = $w('#minPower').value;
        const maxPower = $w('#maxPower').value;

        addItemstoRepeater(selectedBox, selectedBox2, dropDown, selectedBox3, minPower, maxPower);
    })
    
    $w('#maxPower').onInput((event) => { 
        const selectedBox = $w('#checkboxGroup1').value; //Planet Type
        const selectedBox2 = $w('#checkboxGroup2').value; //Card Type
        const selectedBox3 = $w('#checkboxGroup3').value; //Rarities
        const dropDown = $w('#dropdown1').value;
        const minPower = $w('#minPower').value;
        const maxPower = $w('#maxPower').value;

        addItemstoRepeater(selectedBox, selectedBox2, dropDown, selectedBox3, minPower, maxPower);
    })

    $w('#minPower').onInput((event) => { 
        const selectedBox = $w('#checkboxGroup1').value; //Planet Type
        const selectedBox2 = $w('#checkboxGroup2').value; //Card Type
        const selectedBox3 = $w('#checkboxGroup3').value; //Rarities
        const dropDown = $w('#dropdown1').value;
        const minPower = $w('#minPower').value;
        const maxPower = $w('#maxPower').value;

        addItemstoRepeater(selectedBox, selectedBox2, dropDown, selectedBox3, minPower, maxPower);
    })

    //THIS IS WHAT I NEED ASSISTANCE WITH
    $w('#table1').onRowSelect( (event) => {
        let rowData = event.rowData;
        console.log(rowData);    // {"fName": "John", "lName": "Doe"}
        let rowIndex = event.rowIndex;  // 2
        console.log(rowIndex);
        //What do? I'm stumped. 
    } );
});

function addItemstoRepeater(selectedOption = [], selectedOption2 = [], dropDown, selectedOption3 = [], minPower, maxPower) {
 
    let dataQuery = wixData.query(databaseName);

    if (selectedOption.length > 0) {
        dataQuery = dataQuery.hasSome(databaseField, selectedOption);
    }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
    if (selectedOption2.length > 0) {
        dataQuery = dataQuery.hasSome(databaseField2, selectedOption2);
    }

    if (selectedOption3.length > 0) {
        dataQuery = dataQuery.hasSome(databaseField4, selectedOption3);
    }

    if (dropDown > 0) {
        dataQuery = dataQuery.hasSome(databaseField3, dropDown);
    }

    if(minPower > 0) {
        if (maxPower > minPower) {
            dataQuery = dataQuery.between(databaseField5, minPower, maxPower);
        }
    }

    dataQuery
        
        .find()
        .then(results => {
            const filtereditemsReady = results.items;
            $w('#table1').rows = filtereditemsReady;
        })
}

Any further questions just ask.
Thanks

2

So why do you have an issue with that?

You have already everything you need inside your code…

 $w('#table1').onRowSelect( (event) => {
   let rowData = event.rowData; console.log("Row-Data: ", rowData); 
   let rowIndex = event.rowIndex; console.log("Row-Index: ", rowIndex);
});

I asume your DB-FIELD-ID, where you have stored your images, is → “images”.
So then you will need this one…

$w('#table1').onRowSelect( (event) => {
   let rowData = event.rowData; console.log("Row-Data: ", rowData); 
   let rowIndex = event.rowIndex; console.log("Row-Index: ", rowIndex);
   console.log("Title: ", event.rowData.title);
   console.log("Planet: ", event.rowData.planet);
   console.log("Health: ", event.rowData.health);
   console.log("Image: ", event.rowData.images);
   
   $w('#ID_of_your_wanted_Image_to_be_replaced_here').src = event.rowData.images
});

What do you get in CONSOLE ??? (Screenshot) ???

3

1920×1040 109 KB

Thanks for the reply.
After adding your code, the console reveals it is set to undefined.
I knew I had everything in the code, but this was the main issue I had. @russian-dima .

I didn’t think to add the “event.” field to the parameters.

4

To elaborate, I only care about the undefined “image.”

5

Hi there …

Inside your onRowSelect 's event handler, you need to access the rowData from the event argument.

$w('#table1').onRowSelect(event => {
    const rowData = event.rowData;
    console.log(rowData);
    /* {
        cardTitle": "John",
        images: "https://domain.com/path/file.jpg",
        set: "something",
        stars: 0,
        ...
    } */
    
    console.info(rowData.images); // Should print: https://domain.com/path/file.jpg
    
    // Now update your image's src with the URL of the image.
    $w('#image').src = rowData.images;
});

Pay close attention to what the next console is printing to the console, the keys of the returned object will most likely be your collection fields’ IDs.

Hope this helps~!
Ahmad

6

Thanks for the reply, @ahmadnasriya , while I had to make some changes to your code as I have fields that are a little bit different, let me show you what shows up in the console as a result.

Any further ideas would be greatly appreciated.

1920×1040 214 KB

7

@nathanialkorman OK, try replacing line 15 (of my code) with this line, and let me know if it works.

$w('#image').src = `https://static.wixstatic.com/media/${rowData.images.uri}`;
8

@ahmadnasriya Yes sir, this worked! Thank you for the help! This post can now be closed :slight_smile:

9

@nathanialkorman Glad that it worked! Have a good evening :wink:

10

@anon72313111 can anybody tell me please how can i make the column to show thumnail image in the thnumnail_column i ahve the url of thumbnail
here is screenshot of table
tbl_screenshot

and here is the code snippet i ahve updated the column filed type to image but did not worked