wixLocation.to function resetting dropdown's

mattja19 · June 14, 2021, 8:32pm

Hi guys,

I have used the following code (taken in part from https://www.wix.com/velo/forum/coding-with-velo/how-can-i-link-a-dropdown-user-input-element-to-a-dynamic-page)) to enable the value of a dropdown selection to enable the dynamic page url to change based on the value of the dropdown.

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

}

It is set up as an onChange event against Dropdown2 and it does exactly what I want with regards to the url changing. However, whenever I make a selection from the dropdown it makes the selection and then resets to the placeholder value instead of keeping the selected value in the dropdown. It also resets the other dropdown I have to placeholder value as well and as this dropdown is setup to clear the screen onChange, whenever I make a selection it is appearing and then disappearing as the dropdown’s reset.

Does anyone have any idea why this is happening please?

Thanks

CODE-NINJA · June 15, 2021, 2:46pm

This is a totaly normal behaviour.

Your DropDowns resets, because you redirect to another page.

How to resolve this issue? —>
https://www.wix.com/velo/reference/wix-storage/storage/introduction

mattja19 · June 15, 2021, 8:39pm

Thanks for your response @russian-dima

My previous research has taken me down the route of storage and I think I understand the logic of this (being a novice at coding) based on the examples I have found - setItem in Page 1 code and then getItem in Page 2 code seems to be the trend of the examples I can find online.

However, as I am using a dynamic page with multiple items from my dataset, I don’t have anywhere for ‘Page 2 code’ to go as all of my code is in the same place for this page.

I’m not sure if I am lacking understanding of dynamic pages or wix-storage (or both) but having spent much of this afternoon and evening reading up on this I have yet to produce any positive results

CODE-NINJA · June 15, 2021, 9:53pm

@mattja19
Show your SETUP.
Show your current code.
Give more informations to work with.

mattja19 · June 16, 2021, 9:22pm

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

CODE-NINJA · June 17, 2021, 8:47pm

Your CODE is very unclear and chaotic. I tried to reconfigure your code and reformating it a little bit, for better reading.

$w.onReady(()=>{
    uniqueDropDown1(); //<--- automatic population of DD1 when page is ready!
    $w('#dynamicDataset').onReady(()=>{
       console.log("The dataset is ready to be filtered.");
       let number = $w('#numberDropDown').value;
       $w('#dynamicDataset').setFilter(wixData.filter().eq("number", number))
       .then(()=>{
          console.log("Dataset1 filtered with the matching title from 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);});
 
      //---------- Class-Dropdown------------------------
        $w('#classDropDown').onChange(()=>{
            uniqueDropDown2(); //<-------- populating DropDown2
            $w('#numberDropDown').enable(); 
            $w('#numberDropDown').value = null;
            $w('#box9, #box10, #text356, #text472').collapse();
            $w('#button15, #image14, #box8, #repeater1').collapse(); 
       });

     //---------- Number-Dropdown------------------------
        $w('#numberDropDown').onChange(()=>{
           let page = event.target.value;
           let path = page;
           wixLocation.to(`/locomotive-logs-1/${path}`);
        });
    });
});


// ---------------------- FUNCTIONS ------------------------
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};});
   }
}

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};});
   }
}

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

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

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

Perhaps now you will be able to find your bug. Investigate your CODE step by step and put console-logs onto important code-lines, to understand your own code better.

mattja19 · June 18, 2021, 12:06pm

@russian-dima Thanks for that re-ordering, and particularly for the adding multiple items to .collapse, .hide etc lines - didn’t realise you could do that

However, I’m not sure there is a bug in this code as from what you have said previously I need to use wix-storage to enable the dropdown selections to remain and to avoid the dropdown’s resetting but is it possible to setItem and getItem all within the same code for a dynamic page?

mattja19 · June 19, 2021, 10:05pm

@russian-dima hi again V-N. I have spent much of today, rebuilding the page in question and I have now managed to get it doing what I require in terms of the url and using wix-storage to keep the dropdown on the selection after the page changes.

However, having found solutions to every other problem I have encountered, I do have one issue I am struggling to resolve. My setup still has a dependent dropdown system on page 1 which works fine ie when I pick an option from the #classDropDown the correct list appears in #numberDropDown and picking from this dropdown redirects to page 2 where the results are shown. The issue arises on page 2 because I would like the #numberDropDown to continue just showing the list that relates to the selection in #classDropDown enabling the user to cycle through these if they wish. Unfortunately though the filter isn’t working and irrelevant of what is in #classDropDown, everything from the database is showing in the #numberDropDown.

As an example of what I mean, if “1” is selected in #classDropDown, then #numberDropDown would show a list from 1-10 and if “2” is selected it would show 11-20.

Below is the code for page 2 of my setup

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

$w.onReady(function () {
 NumberChange();
    uniqueDropDown2();
 var sameDropDown = local.getItem("class2");
    $w('#classDropDown').value = sameDropDown;
    $w('#classDropDown').placeholder = sameDropDown;
 

 var sameDropDown2 = local.getItem("number1");
    $w('#numberDropDown').value = sameDropDown2;
    $w('#numberDropDown').placeholder = sameDropDown2;
 
 


});



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

 });
function getUniqueTitles(items) {
 const titlesOnly = items.map(item => item.number1);
 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("number1", number)
 
 )
 .then(() => {
        console.log("Dataset1 dataset is now filtered with the matching title from the dropdown");
 let getItem = $w('#dynamicDataset').getCurrentItem();
 let url = wixLocation.to(`/locomotive-logs-test/${$w("#numberDropDown").value}`);
 
 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 button12_click(event) {
    local.clear();
}

export function button15_click_1(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(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();


}

My gut feeling is telling me that the line I have highlighted above is where the issue is arising because on page 2 the info in #classDropDown is coming across from page 1 via the wix-storage set/getItem which I think may be impacting on the filtering from the dataset.

I’m hoping you can shunt me in the right direction as I have just ticked over 10 hours worth of time spent on this today and I’m tiring haha.

Thanks

CODE-NINJA · June 20, 2021, 5:11pm

I do not know if i understand your project the right way, but i think you want to transfer data from SITE-A to SITE-B to use the transfered data on SITE-B.

What is wrong here???
Why you start —> uniqueDropDown2() , befor you get the needed values from wix-storage?

$w.onReady(function(){
	NumberChange();uniqueDropDown2();
	var sameDropDown = local.getItem("class2");
	$w('#classDropDown').value = sameDropDown;
	$w('#classDropDown').placeholder = sameDropDown;
	var sameDropDown2 = local.getItem("number1");
	$w('#numberDropDown').value = sameDropDown2;
	$w('#numberDropDown').placeholder = sameDropDown2;
	...
	..
	.

So normaly you have first to load the transfered data…
Use more console-logs to investigate & understand your own code.
What happens at which line of code?

And always ask yourself, what should be done first and what last in your code.
Try to think the logical way.

Are you able to use data, which did not has been loaded yet? → No you can’t!

$w.onReady(function(){
   // ---> first setting all the values ....
	var sameDropDown = local.getItem("class2"); console.log(sameDropdown);
	var sameDropDown2 = local.getItem("number1"); console.log(sameDropdown2);
	$w('#classDropDown').value = sameDropDown;
	$w('#classDropDown').placeholder = sameDropDown;
	$w('#numberDropDown').value = sameDropDown2;
	$w('#numberDropDown').placeholder = sameDropDown2;
	
  // ---> before starting some functions.....
	NumberChange();
  // ---> sending values direct way to function...
	uniqueDropDown2(sameDropDown);	
	...
	..
	.

Doing it the direct way…

//Doing it the DIRECT way....
$w('#classDropDown').value = local.getItem("class2");
$w('#classDropDown').placeholder = local.getItem("class2");
$w('#numberDropDown').value = local.getItem("number1");
$w('#numberDropDown').placeholder = local.getItem("number1");

function uniqueDropDown2(VALUE){    
    wixData.query('LocomotiveLogsTest')
   //.contains("class2",$w('#classDropDown').value) //<---old one
    .contains("class2", VALUE) <--- new one
    .ascending('number1')
    .limit(1000)
    .find()
    .then(results=>{
        const uniqueTitles =getUniqueTitles(results.items);
        $w('#numberDropDown').options =buildOptions(uniqueTitles);});
        
        functiongetUniqueTitles(items){const titlesOnly = items.map(item=> item.number1);return[...newSet(titlesOnly)];}functionbuildOptions(uniqueList){return uniqueList.map(curr=>{return{label:curr, value:curr};});}
}

.contains("class2",$w('#classDropDown').value) //<---old one
.contains("class2", VALUE) <--- new one

Yes both way can be used, depending on how your variables are declared!

mattja19 · June 22, 2021, 3:28pm

Thanks for this @russian-dima . You are correct that my logic was wayward. I did focus in on the onReady data but must admit that my limited knowledge lead me to think that the order was irrelevant when clearly it isn’t - another lesson learnt!

I have also added to what you have offered above to enable wixStorage to operate correctly on page 2 to ensure that the dropdown changes as per the user selection.

I do have one further question relating to this (although it may be a case that I need to start a new thread for it). On page 1 of my setup I now have a repeater with container boxes which each bear relation to the #classDropDown. Is it possible, either via onClick on the container or by adding a button to the container, to be redirected to page 2 and for the #numberDropDown to then build and show the values which relate to the class on the container which was clicked.

So an example would be that on Page 1 I have a repeater with 2 items. One is Class 1 and one is Class 2. When the container on class 1 is clicked, I would be redirected to Page 2 and the #numberDropDown on there would list 1-10 and if I click on the Class 2 container on page 1 the dropdown on page 2 would list 11-20. I suspect it can be done, as it feels quite similar to a dependent dropdown (just using a button to replace the first dropdown) but I would prefer to know it is possible before spending too much time on it

Thanks very much for all of your help

CODE-NINJA · June 22, 2021, 4:38pm

@mattja19

Ok, i hope i understood you the right way.

Your situation:

REPEATER
with 2x CONTAINERS
You need a click-function related to the mentioned containers, right?

Therefore you will have 2-options how to solve it (but not sure)

Option-A:
https://www.wix.com/velo/reference/$w/repeater/onitemready

Option-B:
https://www.wix.com/velo/reference/$w/addressinput

It is difficult to imagine your project. Some visual screenshots, would make everything more simple.

CODE-NINJA · June 22, 2021, 5:59pm

Sorry! Seems like the URL for Option-B was wrong.
Here the right one, one more time…
https://www.wix.com/velo/reference/$w/at

mattja19 · June 22, 2021, 11:11pm

@russian-dima Thanks, I will check those links out tomorrow to see if they fit my needs. If I am still struggling, I shall return with some screenshots to help with visualising what I am looking for

Topic		Replies	Views
Make dropdown clickable and link to different page Ask the community code , question	3	139	July 15, 2022
Changing dynamic page with a dropdown menu Ask the community code , question	4	959	March 20, 2020
Dynamic Page Load Problem Ask the community code , question	1	280	June 1, 2019
Dropdown selection changing page Ask the community code , question	2	148	August 12, 2020
Using a dropdown box to direct to a URL Ask the community code , question	31	1151	June 22, 2020

wixLocation.to function resetting dropdown's

Related topics