I design custom bags for people, and have a page where people can put together their options to see what the bag would look like when complete. I have different databases for each element, and have a Drop down linked to each database on the page. I have used code to link the drop box to an image so that when the customer clicks on the drop box they can see the item they have chosen on the left. The problem i am having is that if i try and replicate this code, or even change the exact code but change to dropdown2 (with dropdown box2 being an exact replica of the first.)
export function dropdown1_click(event) {
const indexOfItem = event.target.selectedIndex;
$w('#dataset1').getItems(indexOfItem, 1) // you didn't add the name of the dataset element
.then((results) => {
let yourItem = results.items; // yourItem is an Array type
$w('#image').src = yourItem[0].images; // Should be placed in 0 index position
}); //Add your code for this event here:
}
export function dropdown2_click(event) {
const indexOfItem = event.target.selectedIndex;
$w('#dataset2').getItems(indexOfItem, 1) // you didn't add the name of the dataset element
.then((results) => {
let yourItem = results.items; // yourItem is an Array type
$w('#image2').src = yourItem[0].pictures; // Should be placed in 0 index position
}); //Add your code for this event here:
}
(in this the first section of code works, but the second despite it being a replica with just relevant details changed.
Is there any advice that can be given on this, I have tried all sorts for days and I can't seem to work out how to make more than one work at once.
@jezz Just throwing this out there as a possibility, could it be that the image field in dropdown2 is not named "pictures" but rather "images" like in dataset1?
When you say each is linked to a database, do you mean that you have separate collections tied to dataset1 and dataset2? If so, there is no reason why you shouldn't be able to display images from the each dataset.
You might try putting a console.log(results) line after the .then line in the dropdown2 code to determine if the getItems function is returning anything.