wixLocation.to function resetting dropdown's

Ask the community
,
5

This is the code:

import wixLocation from 'wix-location';
import wixData from 'wix-data';
import {session} from 'wix-storage';

$w.onReady(function () {
    uniqueDropDown1();
 NumberChange();
    $w('#numberDropDown').onChange(loadNumberPage);


});

function uniqueDropDown1 (){
    wixData.query("LocoLogs")
 .ascending('class')
 .limit(1000)
 .find()
 .then(results =>{
 const uniqueTitles = getUniqueTitles(results.items);
            $w('#classDropDown').options = buildOptions(uniqueTitles);
 
 });
 function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.class);
 return [...new Set(titlesOnly)]; 
 } 
 function buildOptions(uniqueList){
 return uniqueList.map(curr => {
 return {label:curr, value:curr};
 });
 }
}

export function classDropDown_change_1(event, $w){
uniqueDropDown2();
$w('#numberDropDown').enable(); 
$w('#numberDropDown').value = null;
$w('#box9').collapse();
    $w('#box10').collapse();
    $w('#text356').collapse();
    $w('#text472').collapse();
    $w('#button15').collapse();
    $w('#image14').collapse();
    $w('#box8').collapse();
    $w('#repeater1').collapse();
 
 
}

function uniqueDropDown2(){
    wixData.query('LocoLogs')
 .contains("class", $w('#classDropDown').value)
 .ascending('number')
 .limit(1000)
 .find()
 .then(results =>{
 const uniqueTitles = getUniqueTitles(results.items);
        $w('#numberDropDown').options = buildOptions(uniqueTitles);

 });
function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.number);
 return [...new Set(titlesOnly)];
}
function buildOptions(uniqueList) {
 return uniqueList.map(curr =>{
 return {label:curr, value:curr};
 });
}

}

function NumberChange () {
    $w('#numberDropDown').onChange((event) => {
 let number = $w('#numberDropDown').value;
        $w('#dynamicDataset').onReady(() => {
            console.log("The dataset is ready to be filtered.");

    $w('#dynamicDataset').setFilter(wixData.filter()
 .eq("number", number)
 
 )
 .then(() => {
        console.log("Dataset1 dataset is now filtered with the matching title from the dropdown");
 let getItem = $w('#dynamicDataset').getCurrentItem();
 
 
 
 
 let activeDynamicItem = $w('#dynamicDataset').getCurrentItem();
 let fieldX = activeDynamicItem['photoCredit'];
    console.log(fieldX);
    console.log(activeDynamicItem);
 if (fieldX && fieldX === "") {
 
        $w('#text488').collapse();
 } else {
        $w('#text488').expand();
 }
 
 })
 
 .catch((err) => {
        console.log(err);
 });
 
 
 });
 });
}



export function numberDropDown_change_1(event) {
    $w('#box9').expand();
    $w('#box10').expand();
    $w('#text356').expand();
    $w('#text472').expand();
    $w('#button15').expand();
    $w('#image14').expand();
    $w('#box8').expand();
    $w('#repeater1').expand();
 
 
 
 
 


}

export function button15_click(event) {
    $w('#text484').expand();
    $w('#text482').expand();
    $w('#text485').expand();
    $w('#text483').expand();
    $w('#image15').show();
    $w('#image14').collapse();
    $w('#button14').show();
    $w('#button15').hide();
    $w('#text488').collapse();

}


export function button14_click_1(event) {
    $w('#text484').collapse();
    $w('#text482').collapse();
    $w('#text485').collapse();
    $w('#text483').collapse();
    $w('#image15').hide();
    $w('#image14').expand();
    $w('#button14').hide();
    $w('#button15').show();
    $w('#text488').expand();


}



function loadNumberPage(event, $w) {
 
 let page = event.target.value;
 let path = page;
 
    wixLocation.to(`/locomotive-logs-1/${path}`);

}

The page is set up to load with the ClassDropDown available to the user and then once the user makes their selection from this, the NumberDropDown is activated. From here the user can pick their number and the page loads the relevant information from the dataset based on the ‘number’ field of the dataset. If the user then changes the ClassDropDown choice, this resets the page back to how it was onLoad.

Hope this helps but if you need more info then please let me know.

Thanks very much