Connect drop down list to images

imagine62303 · August 10, 2020, 9:52pm

I have a data set drop down list and I have images on a separate data set that relate to the drop down list. I would like the image to change every time a different list item is selected. The list and the changing image are both on the same dynamic page. Hope that you can help.

CODE-NINJA · August 10, 2020, 10:06pm

And you want to use CODE?

imagine62303 · August 10, 2020, 10:44pm

If I had the code I could input it to get the desired result. I have seen similar questions to mine but wasn’t sure if the code specifically met my needs.

CODE-NINJA · August 11, 2020, 7:35am

Hello Seve,

here is the way you should go to solve your issue…

Create a second dataset (NOT-DYNAMIC) and connect it with your data(base). where you have stored all your images (related) to the dropdown.
Now you have the situation which you can work with. How it will work?

Now you can use the index of the DropDown to select the right image in your DATABASE (which should have the same identic index).

CODE: You could use → getItems(x,x)-command
This example shows you how your code should look like.

$w.onReady(function () {
    $w('#HereYourDropdownId').onChange(()=>{

 let selectedIndex = $w("#HereYourDropDownId").selectedIndex

        $w("#HereYourDatasetIdH").getItems(selectedIndex, 1)
        .then( (result) => {
 let items = result.items;
 let totalCount = result.totalCount;
 let offset = result.offset;

 //here your code what should now happen with your image

            $w('#HereYourImageId').src = items.img //img=the reference-id of your column where you store all your images

        } )
        .catch( (err) => {
 let errMsg = err.message;
 let errCode = err.code;
        });
    })
})

imagine62303 · August 12, 2020, 7:36am

Quick question. How do you connect the data bases?

imagine62303 · August 19, 2020, 6:23pm

How do you connect 2 databases?

CODE-NINJA · August 19, 2020, 7:12pm

@imagine62303
You do all by code.
All results are given by CODE.

console.log(items[0].title)
console.log(items[1].title)
console.log(items[2].title)

the same way like you get the image-source…

$w('#HereYourImageId').src = items[0].img //img=the

imagine62303 · August 21, 2020, 12:24am

Thanks. And what would this be? #HereYourDatasetIdH

imagine62303 · August 21, 2020, 12:26am

@russian-dima Thanks. And what would this be? #HereYourDatasetIdH .

CODE-NINJA · August 21, 2020, 11:40am

@imagine62303
Normaly i am not here to give every-one a ready2go-solution.
I give ideas, which should be worked out by you.

If you need more help, show me first your current state.
-What do you have right now?

How looks like your current code?
How looks like your current project-structure?
What did you change already, what did you add and so on.

I can not see what you are doing.

You said that your list and your images are on the same dynamic page.
When you talking about “list”, you mean surely the “DropDown”.

Did you do all this steps?

here is the way you should go to solve your issue…

Create a second dataset (NOT-DYNAMIC) and connect it with your data(base). where you have stored all your images (related) to the dropdown.

Now you have the situation which you can work with. How it will work?

Now you can use the index of the DropDown to select the right image in your DATABASE (which should have the same identic index).

CODE: You could use → getItems(x,x)-command

This example shows you how your code should look like.

$w.onReady(function () {
    $w('#HereYourDropdownId').onChange(()=>{

 let selectedIndex = $w("#HereYourDropDownId").selectedIndex

        $w("#HereYourDatasetIdH").getItems(selectedIndex, 1)
        .then( (result) => {
 let items = result.items;
 let totalCount = result.totalCount;
 let offset = result.offset;

 //here your code what should now happen with your image

            $w('#HereYourImageId').src = items.img //img=the reference-id of your column where you store all your images

        } )
})

Here you should change the ID of the dataset to your own used dataset-ID.

$w('#HereYourDropdownId')

For example…

$w('#dataset1')

If your NON-DYNAMIC-DATASET has the ID —> “dataset1”

$w.onReady(function () {
 //starts an action when changing DropDown
    $w('#dropdown1').onChange(()=>{
 //sets the value of a variable to the selected index of of your DropDown
 let selectedIndex = $w("#dropdown1").selectedIndex
 //getting the right item from DATABASE by using the DATASET (this should normaly select just ONE-ITEM ---> the curret selected one)
        $w("#dataset1").getItems(selectedIndex, 1)
 //now some results will be returned back
        .then( (result) => {
 // pulling all results into variable [items]
 let items = result.items;
 //counting the number of results ---> should be ---> 1
 let totalCount = result.totalCount;
 // here you can see all RESULTS in your console --> look on bottom of the screen in PREVIEW-MODE
            console.log(items)
            console.log(items[0].title)
            console.log(totalCount)
 // here you set the source of the IMAGE ---> img = column-id whre you store your images!
            $w('#image1').src = items.img //img=the reference-id of your column where you store all your images
        })  
    })
})

If you do not understand the code, you won’t be able to get all this to work.

EDIT:
and here some information about the used command (getItems)…

imagine62303 · August 25, 2020, 6:06pm

@russian-dima

Thanks very much. Everything seems to be ok except for Wix code the message below. I’ve included as snapshot of the code as it stands.

Wix code SDK Warning: The src parameter of “BackgroundSwatchImage” that is passed to the src method cannot be set to null or undefined. - I get this message for line 17.

$w.onReady( function () {

$w( ‘#BackgroundSwatches’ ).onChange(() => {

let selectedIndex =$w( ‘#BackgroundSwatches’ ).selectedIndex

$w( '#dataset3' ).getItems(selectedIndex,  1 ) 
        .then((result) => {

let items = result.items;
let totalCount = result.totalCount;
let offset = result.offset;

//here your code what should now happen with your image

        $w( '#BackgroundSwatchImage' ).src = items.img  //img=the reference-id of your column where you store all your images 

        }) 
        . **catch** ((err) => {

let errMsg = err.message;
let errCode = err.code;
});
})
})

CODE-NINJA · August 25, 2020, 7:06pm

@imagine62303
Where did you got stuck?
What is your last progress-state?

Show your actual code please.

imagine62303 · September 18, 2020, 3:22am

@russian-dima

$w.onReady( function () {

$w( ‘#BackgroundSwatches’ ).onChange(() => {

let selectedIndex =$w( ‘#BackgroundSwatches’ ).selectedIndex

$w( '#dataset3' ).getItems(selectedIndex,  1 ) 
        .then((result) => {

let items = result.items;
let totalCount = result.totalCount;
let offset = result.offset;

//here your code what should now happen with your image

        $w( '#BackgroundSwatchImage' ).src = items.img  //img=the reference-id of your column where you store all your images 

        }) 
        . **catch** ((err) => {

let errMsg = err.message;
let errCode = err.code;
});
})
})

Above is my code. I am not sure where the problem is. But the image that is meant to change disappears and I get the error message below.

Wix code SDK Warning: The src parameter of “BackgroundSwatchImage” that is passed to the src method cannot be set to null or undefined.

This error is occurring on line 17 which is the line of code shown below-

$w( ‘#BackgroundSwatchImage’ ).src = items.img

I hope this helps.

blair · November 23, 2020, 11:57pm

Hi there, I am revamping this thread to see if someone can provide some help. I have basically an identical situation above, and am typically good at reading between the lines to apply code suggestions to my own site. But for some reason i can no figure it out.

My dropdown users would select is “dropdown1” (currently connected to dataset1)
My dataset with the list of dropdown options is “dataset1”, and is set to read only, 20 items to display, filter set to “category=walls”
My image that users would see change automatically based on the dropdown menu mentioned above is “image3” (not currently connected to any dataset)
My dataset with the images to display is “dataset2”, and is set to read/write, 20 items to display, no filters
The reference id of the dataset2 column that contains all of the images is “image”
I generally have max 12 items (dropdown options and corresponding images to link/display)
the code below is a modified version of @russian-dima (thanks for getting me this far!)

Here is a link to the live web page - note, only the upper left hand dropdown (wall material) is currently coded to do anything (all others are placeholders)
www.offhighwayvan .com/interior-design-palettes

right now, i get a message:

Wix code SDK Warning: The src parameter of “image3” that is passed to the src method cannot be set to null or undefined.
If i am not mistaken, I am missing code that links the name of a dropdown item eg “Cement” to the corresponding image of that material in the image column in that data set.

Any help would be incredibly appreciated.

export function dropdown1_change(event) {

 let selectedIndex = $w("#dropdown1").selectedIndex

        $w("#dataset2").getItems(selectedIndex, 12)
        .then( (result) => {
 let items = result.items;
 let totalCount = result.totalCount;
 let offset = result.offset;

 //here your code what should now happen with your image

             $w('#image3').src = items.image //img=the reference-id of your column where you store all your images

        } )
        .catch( (err) => {
 let errMsg = err.message;
 let errCode = err.code;
        });
 
}

CODE-NINJA · November 24, 2020, 12:52am

Will take a look at this tomorrow. Good night

blair · November 24, 2020, 9:53pm

thank you!

CODE-NINJA · November 24, 2020, 10:00pm

Damn, there was a post which i forgot, sorry.

CODE-NINJA · November 24, 2020, 10:15pm

Do you use dynamic pages?

blair · November 24, 2020, 10:29pm

no i do not for this example

CODE-NINJA · November 24, 2020, 10:41pm

Ok, then look here at this code. It’s a very simple one.
What you will need to reconstruct?

1x dropdown
1x image
1x-Dataset for the MATERIAL-LIST (“dataset1”)
1x DATABASE called “Materials”, where you store all the materials and it’s names.
“dataset1” connected to your “Materials”-Database .
“dropdown1” connected with “dataset1” ( read&write )

Reference-Field (“title”): —> Material-Names
Reference-Field (“image”): —> related images

$w.onReady(function () {
    wixData.query("Materials").find()
    .then( (results) => {
 if(results.items.length > 0) {
             myResults = results.items
        } else {
 // handle case where no matching items found
        }
    } )
    .catch( (err) => {
 let errorMsg = err;
    } );

    $w('#dropdown1').onChange(()=>{
        $w('#image1').src=myResults[$w('#dropdown1').selectedIndex].image
    })
});

And here a little example 4-you…
https://www.media-junkie.com/image-list

Topic		Replies	Views
Link Images with Drop down boxes, multiple on page Ask the community code , design , question	4	195	January 24, 2020
Dropdown connected by code, looking to add a corresponding image to each item Ask the community code , wix-stores , question	3	132	January 10, 2020
Linking right picture to a dropdown menu Ask the community code , question	1	387	May 8, 2020
Get connected images from product options Ask the community code , question	0	102	October 18, 2020
Drop Down Menu Ask the community code , question	11	621	August 8, 2018

Connect drop down list to images

Related topics