Thanks for trying out my tutorials.
I hope you don’t mind, but I took a look at your entire page code from the link you shared even though you only posted partial code from that page.
The syntax of your code is correct but your code has a lot of conflicting logic that should be polished up. Let’s start from the top. Without changing your code yet, I want to walk you through some things:
For both dropdowns you are doing 2 things, you are getting current Item of the dynamic page to ‘set the value’ but at the same time you are querying the database to look FOR the values. So you are basically setting the value before the options of values is even determined.
import {session} from 'wix-storage';
import wixLocation from 'wix-location';
let previousPageURL;
$w.onReady(function () {
previousPageURL = session.getItem("page");
console.log(previousPageURL);
session.setItem("page", wixLocation.url);
$w("#btnBack").link = previousPageURL;
$w("#btnBack").target = "_self";
uniqueDropDown1(); // popis
uniqueDropDown2();
const item1 = $w('#dynamicDataset').getCurrentItem();
const AktualniTym = item1.newField; //sloupec Tým se jmenuje newField
$w('#dropdownTeam').value = AktualniTym;
$w('#text40').text = AktualniTym;
const item2 = $w('#dynamicDataset').getCurrentItem();
const AktualniSezona = item2.sezona;
$w('#dropdownSeason').value = AktualniSezona;
//$w('#text40').text = AktualniSezona;
});
Then we have the query for both dropdowns to get the unique possible options (aka the values). As we noticed above, you triggered both of these at the same time inside of the onReady. The first one is trying to find the values for the dropdownTeam, and the second is trying to find the values for the Season that match the dropdownTeam. Again, you are trigger a code based on a value that is neither selected nor determined yet.
function uniqueDropDown1 (){
wixData.query("Sezona") // připojení k DB
.limit(100)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdownTeam").options = buildOptions(uniqueTitles); // naplň nabídku unikátními hodnotami neopakujicimi se
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.tym); //fieldkey nazev v DB
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
function uniqueDropDown2 (){
wixData.query("Sezona")
.contains("tym", $w("#dropdownTeam").value)
.limit(100)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdownSeason").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.sezona); // city druhy nazev v DB
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
And finally we have the last part of the code. This is where you are trying to get values from both dropdowns to create a URL and then redirect person to that URL. The problem here is that you triggered the navigation onChange (when the dropdownTeam changes) before the 2nd dropdown value is selected or determined. Same problem with the 2nd dropdown, you have also triggered the navigation as soon as the dropdown changes. Then you have the navigation code again upon button click. The problem with the button click is, as soon as the person changes 1 of the dropdowns the code will trigger the navigation meaning they will never get to select the 2nd dropdown and they will never get to click the button.
export function dropdownTeam_change(event) {
// Naplněný druhého dropdownu daty s roky
//uniqueDropDown2();
wixData.query("Sezona")
.contains("tym", $w("#dropdownTeam").value)
.limit(100)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdownSeason").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.sezona); // city druhy nazev v DB
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
const AktualniTym = $w('#dropdownTeam').value
const AktualniSezona = $w('#dropdownSeason').value
wixLocation.to(`/soupiska/${AktualniTym}/${AktualniSezona}`);
}
export function dropdownSeason_change(event) {
// Add your code for this event here:
const AktualniTym = $w('#dropdownTeam').value
const AktualniSezona = $w('#dropdownSeason').value
wixLocation.to(`/soupiska/${AktualniTym}/${AktualniSezona}`);
}
export function nacti_click(event) {
// Add your code for this event here:
// Pro případ změny
let season = $w("#dropdownSeason").value;
let team = $w("#dropdownTeam").value;
wixLocation.to(`/soupiska/${team}/${season}/`);
}
Now I am going to remove a few lines of code and share it with you. If you use the code like this then you must disable Season dropdown on load, and delete the button because the code will enable the 2nd dropdown and the navigation will happen after the user selects a value from the 2nd dropdown:
$w.onReady(function () {
previousPageURL = session.getItem("page");
console.log(previousPageURL);
session.setItem("page", wixLocation.url);
$w("#btnBack").link = previousPageURL;
$w("#btnBack").target = "_self";
uniqueDropDown1(); // popis
const item1 = $w('#dynamicDataset').getCurrentItem();
$w('#text40').text = AktualniTym;
});
function uniqueDropDown1 (){
wixData.query("Sezona") // připojení k DB
.limit(100)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdownTeam").options = buildOptions(uniqueTitles); // naplň nabídku unikátními hodnotami neopakujicimi se
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.tym); //fieldkey nazev v DB
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
function uniqueDropDown2 (){
wixData.query("Sezona")
.contains("tym", $w("#dropdownTeam").value)
.limit(100)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdownSeason").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.sezona); // city druhy nazev v DB
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function dropdownTeam_change(event) {
// Naplněný druhého dropdownu daty s roky
uniqueDropDown2();
$w('#dropdownSeason').enable();
}
export function dropdownSeason_change(event) {
const AktualniTym = $w('#dropdownTeam').value
const AktualniSezona = $w('#dropdownSeason').value
wixLocation.to(`/soupiska/${AktualniTym}/${AktualniSezona}`);
}
But if you want to trigger the navigation from the button instead of the 2nd dropdown, then the code will look like this:
$w.onReady(function () {
previousPageURL = session.getItem("page");
console.log(previousPageURL);
session.setItem("page", wixLocation.url);
$w("#btnBack").link = previousPageURL;
$w("#btnBack").target = "_self";
uniqueDropDown1(); // popis
const item1 = $w('#dynamicDataset').getCurrentItem();
$w('#text40').text = AktualniTym;
});
function uniqueDropDown1 (){
wixData.query("Sezona") // připojení k DB
.limit(100)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdownTeam").options = buildOptions(uniqueTitles); // naplň nabídku unikátními hodnotami neopakujicimi se
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.tym); //fieldkey nazev v DB
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
function uniqueDropDown2 (){
wixData.query("Sezona")
.contains("tym", $w("#dropdownTeam").value)
.limit(100)
.find()
.then(results => {
const uniqueTitles = getUniqueTitles(results.items);
$w("#dropdownSeason").options = buildOptions(uniqueTitles);
});
function getUniqueTitles(items) {
const titlesOnly = items.map(item => item.sezona); // city druhy nazev v DB
return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
return uniqueList.map(curr => {
return {label:curr, value:curr};
});
}
}
export function dropdownTeam_change(event) {
// Naplněný druhého dropdownu daty s roky
uniqueDropDown2();
$w('#dropdownSeason').enable();
}
export function nacti_click(event) {
// Add your code for this event here:
// Pro případ změny
let season = $w("#dropdownSeason").value;
let team = $w("#dropdownTeam").value;
wixLocation.to(`/soupiska/${team}/${season}/`);
}
If you want to check out my other tutorials, I have one about navigation using a dropdown element: https://www.totallycodable.com/example-dropdown-navigation
Did you follow the instructions provided in the link above? It should work. Anyways, good to hear that your website is working now, if you ever need help just tag me in your posts.