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.
Unfortunately the were called pictures,
Yes indeed separate databases connected to each dataset.
I tried adding the console.log(results) to the code, but still nothing. What is confusing me is if I change the first line of code to be about dropdown 2, and change the data set linked to dropdown2 to dataset1 , that first line of code no longer works.
Not sure what I am missing here!
Thankyou as well for taking the time to respond. The other confusing thing is that if i even change the name of dropdown 1, to say dropdownfabric, and then change the code to reflect this, it stops working.
@jezz Regarding the changing of the name, you have to re-add the event from the property sheet, and then transfer the code that was in the dropdown1 block to the newly created code snippet.
So, did you look at the developer console at the bottom to see if the console.log revealed anything? It should show the items retrieved in an array. If it doesn’t, that would give you more information on which to troubleshoot.
Are the permissions for the two collections in the collection editor the same? What about the mode in the settings dialog for the two datasets? Any differences?
You might also want to re-examine the dataset settings for the two dropdowns. Are there any differences how they have been set up?