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
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!
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
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