I have a page set up with a dropdown menu which produces data in a repeater subject to the choice made in the dropdown. The page is coded as below: import wixData from 'wix-data' import wixLocation from 'wix-location' $w.onReady(function () { $w('#dropdown1').onChange(genericFilterHandler); $w('#input1').onKeyPress(genericFilterHandler); $w('#input2').onKeyPress(genericFilterHandler); $w('#input3').onKeyPress(genericFilterHandler); $w('#input4').onKeyPress(genericFilterHandler); uniqueDropDown1(); }); function uniqueDropDown1 (){ wixData.query("2022News") .contains("title", "June") .isNotEmpty('number') .descending("title") .limit(1000) .find() .then(results =>{ const uniqueTitles = getUniqueTitles(results.items); let AllOption = [{"label":"All June 2022", "value":"All June 2022"}]; let dropdown1 = buildOptions(uniqueTitles); $w('#dropdown1').options = AllOption.concat(dropdown1); }) .catch((err) =>{ console.log(err) }); } function getUniqueTitles(items) { const titlesOnly = items.map(item => item.title); return [...new Set(titlesOnly)]; } function buildOptions(uniqueList){ return uniqueList.map(curr => { return {label:curr, value:curr}; }); } export function dropdown1_change_1(event, $w){ debounceTimer = setTimeout(() => { $w('#input1').enable(); $w('#input2').enable(); $w('#input3').enable(); $w('#input4').enable(); $w('#repeater1').expand(); $w('#input1').value = null; $w('#input2').value = null; $w('#input3').value = null; $w('#input4').value = null; },900); } let debounceTimer; function genericFilterHandler(event) { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { let masterFilter = wixData.filter().contains("month", "June"); let title = $w('#dropdown1').value; let input1 = $w('#input1').value; let input2 = $w('#input2').value; let input3 = $w('#input3').value; let input4 = $w('#input4').value; if (title && title !== "All June 2022") { masterFilter = masterFilter.eq("title", title); } if (input1) { masterFilter = masterFilter.contains("number", input1); } if (input2) { let operatorFilter = wixData.filter().contains("operator", input2); let shortNameFilter = wixData.filter().contains("shortName", input2); masterFilter = masterFilter.and(operatorFilter.or(shortNameFilter)); } if (input3) { masterFilter = masterFilter.contains("class", input3); } if (input4) { masterFilter = masterFilter.contains("detail", input4) } $w('#dynamicDataset').setFilter(masterFilter); }, 500); } Everything works fine when using it in browser view but the dropdown doesn't react and show the options within it when trying to click on it in mobile view. I have gone through Wix Support who advised me to make a tweak to the above code, which I have done, but the problem seems to remain. Any ideas as to what is causing it to work in one view but not the other?

Guys, I have a situation where something that was working previously, doesn't appear to be now - at least not all of the time. I have a page on my website called Locomotive Logs which can be accessed via a button on the home page leading to a menu page where user can navigate to the page of the choice using dropdown menus. I also have a search function on my site which enables the user to draw up results to a search which then offers a link to the above mentioned Locomotive Logs pages. So for example, a user searches for locomotive 68001 and when they get the results for this, they are offered a button which when clicked will redirect them to the Locomotive Log page for 68001. However, if they access it via the button in the search results, I require the page layout of the Locomotive Log page to differ slightly to when they access it via the button on the home page (with some elements collapsing and others expanding). The relevant piece of code for this is below: Search Result Page: export function button12_click_1(event) { let $item = $w.at(event.context); let currentItem = $item('#Shunters').getCurrentItem(); let dynamicPageID = `${currentItem.number}` let collectionID = `${currentItem.title}` console.log('https://www.ukraillog.co.uk/'+collectionID+'/'+dynamicPageID); wixLocation.to('https://www.ukraillog.co.uk/'+collectionID+'/'+dynamicPageID+"?from=locomotive-results"); } Locomotive Logs page: export function button12_click_1 (event, $w){ let path = wixLocation.path; console.log(path); if (wixLocation.path[0] === "locomotive-results"){ $w('#button1').hide(); console.log("Back button is hidden"); } } let query = wixLocation.query; if (query.from != undefined){ console.log('Query From = '+ query.from); $w('#classDropDown').collapse(); $w('#numberDropDown').collapse(); $w('#button1').collapse(); button15_click_1(); $w('#button14').hide(); $w('#button16').show(); $w('#text541').show(); }else{ $w('#classDropDown').expand(); $w('#numberDropDown').expand(); $w('#button14').show(); $w('#button1').expand(); $w('#button16').hide(); $w('#text541').hide(); } Now, I don't know when this issue began as this area of the site is one where I am slowly adding data to and due to other things taking over, I'd not done much with it for a while. I have added data today and when I was testing that this data had gone in ok, I noticed the issue I am now having which is detailed below and only relates to when the user is clicking the button in the search results page: Currently I am experiencing a situation whereby sometimes everything works as it should and when I redirect from the search result page, the layout of the Locomotive Log page is as it should be. But then on other occasions, I click to redirect and I am met with the page layout I would expect if I had accessed the Locomotive Logs page from the Home Page menu buttons - in essence, the elements that are meant to collapse don't and neither do those that are supposed to expand. Whenever the relevant button is clicked, the redirect works fine and takes you to the correct Locomotive Log page which would suggest the issue lies in the Locomotive Logs page. What I am finding strange is why it seems to work sometimes but then not on other occasions and so I am hoping that somebody out there understands the above drivel and is able to point me in the right direction. Thanks

Hi all, Not sure if this is one for this forum or not but I am pretty desperate so thought I would ask the question! Basically, I have a search function on my Home Page which enables the user to obtain results based on info in up to 8 fields of a collection. The results are shown in one of 5 pages (depending on which section the user decides to search in) using a repeater on each page and all has been working fantastically well since I got this up and running many months ago. It was working well earlier in the week when I was 'showcasing' what it offers to someone but then yesterday I noticed it was not providing the correct results - in all cases it appears to be simply showing the very first item from the relevant dataset collection. I'm finding this ultra strange as I have done no maintenance to any of these pages since I got them up and running and have not touched any of the coding I have for them. I've done the following checks to try and ascertain where the problem lies: 1) I ran a test search earlier knowing that there are 10 results for the search I was doing and the result page showed up 10 results but all of them showing the data for the first item in the dataset. 2) Checked the dev console for any errors - none showing! 3) Added a console log to my code on the results page to check what results were being obtained using console.log(`queryResults is ${JSON.stringify(queryResults)}`); and found that it was returning all of the correct results but just not displaying them in the repeater, instead choosing to show the first item in the dataset collection over and over again! 4) Because the code seems to be working correctly, I have tried removing the connections between the dataset and the repeater and then re-connecting them. I also deleted the dataset altogether from the page before reinstating it and re-connecting it to the repeater - neither of these changed the outcome! The only other thing I have in my mind to try on top of the above is to literally rebuild the page in question but having to rebuild pages whenever there is a bug just doesn't seem like an efficient way of website building to me. I'm no expert on coding, but based on the tests I have conducted, I am pretty sure this is not a code issue but I thought I would post here in the hope that someone may have experienced something similar or can spot what the issue may be. It's a really important feature of my site and one that is a bit unique in the market I am in and so without it, it may be costing me visitors :( If anyone can offer any assistance as to why this is happening it would be appreciated :)

Hi all, Currently working on a new page that uses a repeater with a number of elements, including checkboxes/sliders, text and a button which when clicked will reset the item to show the original state ie checkboxes/sliders reset to FALSE/0 respectively. Whilst in design stage I currently have 2 items in the repeater and at the moment I have got to the point where the button on item 1 resets just item 1 but then when clicking on the button on item 2, it resets both items instead of just resetting item 2. The code I have reached is below: export function button12_click(event, $w) { $w('#repeater1').onItemReady(($w, itemData, $item) => { let currentItem = $w('#dataset1').getCurrentItem(); console.log(currentItem) $w('#checkbox1').enable(); $w('#checkbox1').checked = false; $w('#checkbox2').checked = false; $w('#slider1').enable(); $w('#slider1').value = 0; $w('#slider2').value = 0; $w('#text562').hide(); $w('#text563').hide(); $w('#text560').show(); }); } Having read up on numerous pages on here as well as the API, I've tried different alternatives but not manager to get any further forward so thought I'd turn to you guys to see if anyone could kindly point me in the right direction please? Thanks

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

A slightly strange one in that I have basically re-designed a section of my website today. The dataset remains the same, I have just amended how the page works and how the data is shown. Part of the page is to show a 'photo credit' using a text box on photo's which have been supplied by other people and on the old page I had this working fine but now on the new page, even though I have used the same code, it is not working :( The code for the page is as below: import wixLocation from 'wix-location'; import wixData from 'wix-data'; $w.onReady(function () { uniqueDropDown1(); NumberChange(); CreditTextShow(); }); 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(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) ) .catch((err) => { console.log(err); }); }); }); } function CreditTextShow () { let activeDynamicItem = $w('#dynamicDataset').getCurrentItem(); let fieldX = activeDynamicItem['photoCredit']; if (fieldX && fieldX === "Joe Bloggs") { $w('#text488').show(); } else { $w('#text488').hide(); } } export function numberDropDown_change(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_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(); } All aspects of the code work except for the CreditTextShow function even though I have used the same code that has worked so well on the old version of the page. Could anyone please point me in the right direction with this one please? Thanks

I have been putting together a filter system so users can filter results from a database shown in a repeater. The setup is a dropdown which filters by date and then 3 input boxes which allows the users to then further filter the results they see by 3 other fields within the dataset. I have also added an "All" option to the dropdown which shows all of the results for the month when selected. Everything is working fine - when a specific date is selected from the dropdown, all of the filters work perfectly but when "All" is selected from the dropdown, all results show correctly but when I try to user one of the input boxes to filter, the repeater seems to disappear and no results are shown. This is the code I have so far: import wixData from 'wix-data' $w.onReady(function () { uniqueDropDown1(); filter2(); searchNumber(); searchOperator(); searchClass(); }); function uniqueDropDown1 (){ wixData.query("2021News") .contains("title", "May") .ascending("title") .limit(1000) .find() .then(results =>{ const uniqueTitles = getUniqueTitles(results.items); let AllOption = [{"label":"All", "value":"All"}]; let dropdown1 = buildOptions(uniqueTitles); $w('#dropdown1').options = AllOption.concat(dropdown1); }); function getUniqueTitles(items) { const titlesOnly = items.map(item => item.title); return [...new Set(titlesOnly)]; } function buildOptions(uniqueList){ return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } function filter2 () { $w('#dropdown1').onChange((event) => { let title = $w('#dropdown1').value; let title3 = $w('#input1').value; $w('#dynamicDataset').onReady(() => { console.log("The dataset is ready to be filtered."); $w('#dynamicDataset').setFilter(wixData.filter() .contains("title", title) .contains("number", title3) ) .then(() => { console.log("Dataset is now filtered with the matching title from the dropdown"); let getItem = $w('#repeater1').data }) .catch((err) => { console.log(err); }); }); }) } export function dropdown1_change(event, $w){ $w('#input1').enable(); $w('#input2').enable(); $w('#input3').enable(); $w('#input1').value = null; $w('#input2').value = null; $w('#input3').value = null; let filterType = $w('#dropdown1').value; if (filterType === "All") { $w('#dynamicDataset').setFilter(wixData.filter().contains("month", "May")); } } let debounceTimer; export function input1_keyPress_1(event, $w) { searchNumber(); } function searchNumber () { $w('#input1').onKeyPress((event) => { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { const filterValue = $w('#input1').value const filterValue2 = $w('#input2').value const filterValue3 = $w('#input3').value const textFilter = wixData.filter().contains("number", filterValue) .contains("operator", filterValue2) .contains("title", $w('#dropdown1').value) .contains("class", filterValue3) $w('#dynamicDataset').setFilter(textFilter) }, 500); }); } export function input2_keyPress(event) { searchOperator(); } function searchOperator () { $w('#input2').onKeyPress((event) => { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { const filterValue = $w('#input1').value const filterValue2 = $w('#input2').value const filterValue3 = $w('#input3').value const textFilter = wixData.filter().contains("number", filterValue) .contains("operator", filterValue2) .contains("title", $w('#dropdown1').value) .contains("class", filterValue3) $w('#dynamicDataset').setFilter(textFilter) }, 500); }); } export function input3_keyPress(event) { searchClass(); } function searchClass () { $w('#input3').onKeyPress((event) => { if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; } debounceTimer = setTimeout(() => { const filterValue = $w('#input1').value const filterValue2 = $w('#input2').value const filterValue3 = $w('#input3').value const textFilter = wixData.filter().contains("number", filterValue) .contains("operator", filterValue2) .contains("title", $w('#dropdown1').value) .contains("class", filterValue3) $w('#dynamicDataset').setFilter(textFilter) }, 500); }); } Is there something I am missing which is stopping the input boxes from filtering what is shown in the repeater? Thanks

I did add this query onto another post of mine but it may have got lost so thought I'd start a new one. I currently have a search result page which is linked to a dataset called 'Shunters'. Using the following code, I have been able to create a link from the search results to the relevant dynamic page with the 'number' field from the dataset being the link - so clicking on the search result for number 90001 would take you to the dynamic page for number 90001: functionlinktolocolog(){ $w('#Shunters').onReady(()=>{ $w("#container2").onClick((event)=>{ let $item = $w.at(event.context); let currentItem =$item('#Shunters').getCurrentItem(); let dynamicPageID =`${currentItem.number}` let collectionID =`${currentItem.title}` console.log('https://www.mywebsite.co.uk/'+collectionID+'/'+dynamicPageID); wixLocation.to('https://www.mywebsite.co.uk/'+collectionID+'/'+dynamicPageID);});})} Some of the numbers produced in the search results won't have a dynamic page and so currently when clicking on these items I am redirected to a 404 error page. What I would like to do is, instead of being redirected to that error page, is for those search results which don't have corresponding dynamic page to be unclickable. This would require comparing the 'number' field in one dataset (the one on the search results page) to the 'number' field in the dataset on the Dynamic Page and if the numbers exist in both allowing the search result to be clickable and if they don't exist in both then making the search result unclickable. I have tried a few approaches and have been pointed towards async/await functions and so tried the below: async function linktodynamicpage () { $w('#Shunters').onReady(async () => { const number1 = await wixData.query('Shunters') .eq('number', number1) .find(); const number2 = await wixData.query('DynamicPageCollection') .eq('number', number2) .find(); if (number1 === number2){ $w("#container2").onClick((event)=>{ let $item = $w.at(event.context); let currentItem =$item('#Shunters').getCurrentItem(); let dynamicPageID =`${currentItem.number}` let collectionID =`${currentItem.title}` console.log('https://www.mywebsite.co.uk/'+collectionID+'/'+dynamicPageID); wixLocation.to('https://www.mywebsite.co.uk/'+collectionID+'/'+dynamicPageID);});})} When using this code though, none of the search results become clickable where some should be as the number exists in both of the collections so I am clearly doing something wrong but I am not sure what. Any help would be appreciated :) Thanks

Hi everybody, I am currently working on a dynamic page setup on my site which involves radio buttons. There are 4 radio buttons with each one linking to a different dynamic page and I have added the below code to change the url to match the relevant selection export function radioGroup1_change() { const label = $w('#radioGroup1').value let url = wixLocation.to(`/dynamic-page/${label}`); } (Nearly) everything works fine - the pages change according to the selection made in the radio buttons and the url follows suit. However, the page is set up to load onto 'Page 1' of the dynamic page and on loading the radio button for Page 1 is highlighted to indicate we are on that page. When i click on 'Page 2' (as an example) on the radio buttons, everything changes correctly but the radio button reverts to highlighting 'Page 1' instead of staying highlighted on 'Page 2'. Is there something missing from this code which I need to add to correct this please as I have scoured this forum but not been able to find any answers unfortunately? Thanks

Hi everyone, I am developing a new page which has a repeater linked to a dataset and 3 dropdown list's, which are populated from specific fields of the database to filter the data shown in the repeater - all of which works perfectly. However, I would like to add an 'All' option the each dropdown menu which when selected would reset that particular dropdown's filter. I thought this would be a simple process to sort but having spent much of today trying and failing, it clearly is anything but simple (for me anyway!). I've found this on this forum https://www.wix.com/velo/forum/main/comment/5b220420b55cc600145e5979 but I am struggling to fit it into my code, which as it stands is: function uniqueDropDown1 (){ wixData.query("HeritageNews") .limit(1000) .find() .then(results =>{ const uniqueTitles = getUniqueTitles(results.items); $w('#newsType').options = buildOptions(uniqueTitles); }); function getUniqueTitles(items) { const titlesOnly = items.map(item => item.title); return [...new Set(titlesOnly)]; } function buildOptions(uniqueList){ return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } function filter2 () { $w('#newsType').onChange((event) => { let title = $w('#newsType').value; $w('#dynamicDataset').onReady(() => { console.log("The dataset is ready to be filtered."); if ($w('#newsType').value === "All"){ $w('#dynamicDataset').setFilter(); }else { $w('#dynamicDataset').setFilter(wixData.filter() .eq("title", title) ) .then(() => { console.log("Dataset is now filtered with the matching title from the dropdown"); let getItem = $w('#repeater1').data }) .catch((err) => { console.log(err); }); } }); }) } I've tried adding the code in the linked thread and have changed the optionsList part to other variations to suit my code but with no luck. Generally, it is either a case of the dropdown populating nothing or just populating the data from the field of the dataset without ever showing 'Add'. Could anyone assist with where I am going wrong on this one please? Thanks

Evening all, Is it possible to hide elements on a dynamic page based on the URL of the current page? So as an example: I have dynamic pages, connected to the same dataset and with a dropdown to flick through the pages. which have the following URLs: www.mywebsite.com/mydynamicpage/01 www.mywebsite.com/mydynamicpage/02 (The above are made up so click on them at your own risk) The dynamic page is set up with a text box and an image box and when it is on the page ending "01" I want both elements to show and when it is on "02" I would want the text box to show but the image box to be hidden. It seems to me that this should be a very simple thing to do using the if function but I have failed to get it to do as I wish and have not been able to find anything online to help with it so I have, once again, come cap in hand for some help please. Thanks

Hi guys, I posted this question yesterday - https://www.wix.com/velo/forum/community-discussion/brief-sighting-of-a-different-page-when-switching-pages-in-dynamic-pages Since then, I have continued to try and solve the problem and I have actually now realised that I don't need to set up an extra row in the dataset for a Dynamic Page to create a generic url as the url is supposed to change when the pages within the Dynamic Page change. However, this doesn't seem to be happening with mine. I have a dynamic page which is set up against the 'Number' field from my dataset and I am using a dropdown menu to flick between the different pages within the Dynamic Page with the following code implemented: import wixLocation from 'wix-location'; import wixData from 'wix-data'; $w.onReady(function () { $w('#class20LocoData').onReady( () => { UniqueDropDown(); PageChange(); }); }); function UniqueDropDown () { wixData.query('Class20LocoData') .ascending('number') .limit(1000) .find() .then(results => { const uniqueNumber = getUniqueNumber(results.items); $w('#numberDropDown').options = buildOptions(uniqueNumber); }); function getUniqueNumber(items) { const numberOnly = items.map(item => item.number); return [...new Set(numberOnly)]; } function buildOptions(uniqueList){ return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } function PageChange () { $w('#numberDropDown').onChange((event) => { let number = $w('#numberDropDown').value; $w('#class20LocoData').onReady(() => { console.log("The dataset is ready to be filtered."); $w('#class20LocoData').setFilter(wixData.filter() .eq("number", number) ) .then(() => { console.log("Class 20 Loco Data dataset is now filtered with the matching number from the dropdown"); let getItem = $w('#class20LocoData').getCurrentItem(); let url = getItem.url; }) .catch((err) => { console.log(err); }); }); }); } The url is set up as - https://www.ukraillog.co.uk/class-20-loco-data/{Number} - and when the page loads it picks out the first number in the list in the url but then when I pick a different number from the dropdown, the page changes correctly, but the url stays with that same initial number instead of changing to the number relating to the new page. If I overtype the number part of the url, it will take me to the correct page but doesn't change when I use the dropdown which makes me think I need something extra in the above code to make this work correctly. If someone can point me in the right direction, it would be massively appreciated. Thanks

I will try and explain this the best I can.... I have a Dynamic Page set up which has a dropdown menu to move through the different pages using the 'number' field of my dataset. I have most elements hidden on load so that a 'welcome' page shows when the user first enters the page which works fine. In one of the rows of my dataset I have 'Select Number' in the number field - I have this set up purely to use as part of the Dynamic Page url otherwise I have to pick one of the numbers and that looks a bit daft when it doesn't change as users pick different numbers from the dropdown. The downside of doing this is that it automatically creates a page for this item and adds 'Select Number' to the dropdown menu. To allow me to work with the hidden elements where necessary and also to allow me to make the 'Select Number' page identical to the 'welcome' page I have set up the following code on the page: import wixLocation from 'wix-location'; import wixData from 'wix-data'; $w.onReady(function () { UniqueDropDown(); PageChange(); }); function UniqueDropDown () { wixData.query('Class20LocoData') .ascending('ddSort') .limit(1000) .find() .then(results => { const uniqueNumber = getUniqueNumber(results.items); $w('#numberDropDown').options = buildOptions(uniqueNumber); }); function getUniqueNumber(items) { const numberOnly = items.map(item => item.number); return [...new Set(numberOnly)]; } function buildOptions(uniqueList){ return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } function PageChange () { $w('#numberDropDown').onChange((event) => { let number = $w('#numberDropDown').value; $w('#class20LocoData').onReady(() => { console.log("The dataset is ready to be filtered."); $w('#class20LocoData').setFilter(wixData.filter() .eq("number", number) ) .then(() => { console.log("Class 20 Loco Data dataset is now filtered with the matching number from the dropdown"); let getItem = $w('#class20LocoData').getCurrentItem(); let url = getItem.url; }) .catch((err) => { console.log(err); }); }); }); } export function numberDropDown_change(event){ let value = event.target.value; if (value > 0) { $w('#text479').hide(); $w('#text356').show(); $w('#box9').show(); $w('#text475').show(); $w('#text476').show(); $w('#box10').show(); $w('#text477').show(); $w('#text478').show(); $w('#box8').show(); $w('#text418').show(); $w('#text419').show(); $w('#text420').show(); $w('#repeater1').show(); $w('#text472').show(); $w('#image14').show(); } if (value === "Select Number") { $w('#text479').show(); $w('#text356').hide(); $w('#box9').hide(); $w('#text475').hide(); $w('#text476').hide(); $w('#box10').hide(); $w('#text477').hide(); $w('#text478').hide(); $w('#box8').hide(); $w('#text418').hide(); $w('#text419').hide(); $w('#text420').hide(); $w('#repeater1').hide(); $w('#text472').hide(); $w('#image14').hide(); } } Everything is working as I want it to and all of the pages are showing the elements I want them to. However, when I first enter the page and go from the blank dropdown to selecting another page, the 'Select Number' page briefly appears before the correct page is shown. It is not a major problem but it does look a bit untidy and so was wondering if this can be corrected and if so if someone could point me in the right direction please? If you wish to take a look at what I am talking about, the page is live at https://www.ukraillog.co.uk/class-20-loco-data/select-number - just pick any page (except 'Select Number' from the dropdown and you should see what I mean :) Thanks

Evening all, I currently have a search function which incorporates 8 or 9 search boxes, in essence allowing the user to filter their search as they see fit using the fields in my dataset collection. There is also a dropdown box with 4 options in - 1 of these options results in 8 search boxes showing and the other 3 will show 9 search boxes. I have a vector image I use as the 'search click' button which currently activates any search conducted using the code below: import { local } from 'wix-storage'; import wixLocation from 'wix-location'; import wixData from 'wix-data'; $w.onReady(function () { }); export function dropdown1_change_1(event, $w) { searchenable(); if (event.target.value === "Locomotives") { $w('#iClass').enable(); $w('#iNumber').enable(); $w('#iPrevNumber').enable(); $w('#iOperator').enable(); $w('#iLivery').enable(); $w('#iName').enable(); $w('#iDepot').enable(); $w('#iStatus').enable(); $w('#iFormation').collapse(); $w('#searchButton').show(); } else if (event.target.value === "Diesel Multiple Units") { $w('#iClass').enable(); $w('#iNumber').enable(); $w('#iPrevNumber').enable(); $w('#iOperator').enable(); $w('#iLivery').enable(); $w('#iName').enable(); $w('#iDepot').enable(); $w('#iStatus').enable(); $w('#iFormation').expand(); $w('#iFormation').enable(); $w('#searchButton').show(); } else if (event.target.value === "Electric Multiple Units") { $w('#iClass').enable(); $w('#iNumber').enable(); $w('#iPrevNumber').enable(); $w('#iOperator').enable(); $w('#iLivery').enable(); $w('#iName').enable(); $w('#iDepot').enable(); $w('#iStatus').enable(); $w('#iFormation').expand(); $w('#iFormation').enable(); $w('#searchButton').show(); } else if (event.target.value === "All Traction") { $w('#iClass').enable(); $w('#iNumber').enable(); $w('#iPrevNumber').enable(); $w('#iOperator').enable(); $w('#iLivery').enable(); $w('#iName').enable(); $w('#iDepot').enable(); $w('#iStatus').enable(); $w('#iFormation').expand(); $w('#iFormation').enable(); $w('#searchButton').show(); } } function searchenable() {} export function searchButton_click(event) { let word = $w('#iClass').value local.setItem("searchWord", word); let word4 = $w('#iNumber').value local.setItem("searchWord2", word4) let word3 = $w('#iPrevNumber').value local.setItem("searchWord3", word3) let word2 = $w('#iOperator').value local.setItem("searchWord4", word2) let word5 = $w('#iLivery').value local.setItem("searchWord5", word5) let word6 = $w('#iName').value local.setItem("searchWord6", word6) let word7 = $w('#iDepot').value local.setItem("searchWord7", word7) let word8 = $w('#iStatus').value local.setItem("searchWord8", word8) let word9 = $w('#iFormation').value local.setItem("searchWord9", word9) let option = $w('#dropdown1').value; if (option === "Locomotives") { wixLocation.to('/loco-results'); } if (option === "Diesel Multiple Units") { wixLocation.to('/dmu-results'); } if (option === "Electric Multiple Units") { wixLocation.to('/emu-results'); } if (option === "All Traction") { wixLocation.to('/all-traction-results'); } } This works perfectly but I would also like users to be able to user their "Enter" key to activate the search as well as the search button but I am struggling to get this to work. I have used onKeyPress as an export function when setting this on a single search box in the past using the ...if(event.key === "Enter")... code and have managed to get it to work but I am struggling here with the multiple numbers of search boxes involved. I have tried something like the below I found elsewhere on here (obviously changing the code where necessary): $w.onReady(function(){$w("#search1, #search2, #search3").onKeyPress((event)=>{if(event.key ==="Enter"){runSearch(event.target.id);}}) but this doesn't even manage to activate the search when I hit Enter! Could someone put me out of my misery please, or if not that, at least point me in the right direction to finding a solution? Thanks very much

Hi all, Got a bit of a 'whack-a-mole' situation :( I have a search function on my website which uses 8 separate search bars to filter results. These results are shown on a results page which is made up of 2 repeaters where each show 12 results and more results load on scroll. All was working fine but I then decided I'd prefer certain elements to collapse if either of the repeaters had no results in them. I have managed to get this aspect working but now the load more on scroll function is not working. The full code I have for the results page is below: import { local } from "wix-storage"; import wixData from "wix-data"; async function fetchData() { const firstPage = await wixData.query("Shunters").limit(1000).find(); const secondPage = await wixData .query("Shunters") .limit(1000) .skip(1000) .find(); return firstPage.items.concat(secondPage.items); } async function fetchData2() { const firstPage = await wixData.query("DMU").limit(1000).find(); const secondPage = await wixData .query("DMU") .limit(1000) .skip(1000) .find(); return firstPage.items.concat(secondPage.items); } $w.onReady(function () { var sameWord = local.getItem("searchWord"); $w("#iClass").value = sameWord; $w("#iClass").placeholder = sameWord; var sameWord2 = local.getItem("searchWord2"); $w("#iNumber").value = sameWord2; $w("#iNumber").placeholder = sameWord2; var sameWord3 = local.getItem("searchWord3"); $w("#iPrevNumber").value = sameWord3; $w("#iPrevNumber").placeholder = sameWord3; var sameWord4 = local.getItem("searchWord4"); $w("#iOperator").value = sameWord4; $w("#iOperator").placeholder = sameWord4; var sameWord5 = local.getItem("searchWord5"); $w("#iLivery").value = sameWord5; $w("#iLivery").placeholder = sameWord5; var sameWord6 = local.getItem("searchWord6"); $w("#iName").value = sameWord6; $w("#iName").placeholder = sameWord6; var sameWord7 = local.getItem("searchWord7"); $w("#iDepot").value = sameWord7; $w("#iDepot").placeholder = sameWord7; var sameWord8 = local.getItem("searchWord8"); $w("#iStatus").value = sameWord8; $w("#iStatus").placeholder = sameWord8; $w("#Shunters").onReady(function () { search(); }); $w("#dmu").onReady(function () { search2(); }); }); export function searchButton_click_1() { search(); search2() } let queryResults; async function search() { let queryBuilder = wixData.query("Shunters"); const iClass = $w("#iClass").value; if (iClass) { queryBuilder = queryBuilder.contains("class1", iClass); } const iNumber = $w("#iNumber").value; if (iNumber) { queryBuilder = queryBuilder.contains("number", iNumber); } const iPrevNumber = $w("#iPrevNumber").value; if (iPrevNumber) { queryBuilder = queryBuilder.contains("previousNumber", iPrevNumber); } const iOperator = $w("#iOperator").value; if (iOperator) { queryBuilder = queryBuilder.contains("operator", iOperator); } const iLivery = $w("#iLivery").value; if (iLivery) { queryBuilder = queryBuilder.contains("livery", iLivery); } const iName = $w("#iName").value; if (iName) { queryBuilder = queryBuilder.contains("name", iName); } const iDepot = $w("#iDepot").value; if (iDepot) { queryBuilder = queryBuilder.contains("depot", iDepot); } const iStatus = $w("#iStatus").value; if (iStatus) { queryBuilder = queryBuilder.contains("status", iStatus); } queryResults = await queryBuilder .limit(12) .ascending("class1") .ascending("sort2") .ascending("sort") .find() .then ((queryResults) => { let resultCount = queryResults.totalCount; if (resultCount > 0) { $w("#repeater1").data = queryResults.items; } else { $w('#text116').collapse(); $w('#repeater1').collapse(); $w('#loadingStrip').collapse(); $w('#loadingGif').collapse(); } }) .catch((err) => { let errorMsg = err; }); } export async function loadingStrip_viewportEnter(event) { $w("#loadingGif").show(); const nextResults = await queryResults.next(); $w("#loadingGif").hide(); queryResults = nextResults; const data = $w("#repeater1").data; $w("#repeater1").data = $w("#repeater1").data.concat(nextResults.items); console.log("Done loading more data"); } let queryResults2; async function search2() { let queryBuilder = wixData.query("DMU"); const iClass = $w("#iClass").value; if (iClass) { queryBuilder = queryBuilder.contains("class", iClass); } const iNumber = $w("#iNumber").value; if (iNumber) { queryBuilder = queryBuilder.contains("number", iNumber); } const iPrevNumber = $w("#iPrevNumber").value; if (iPrevNumber) { queryBuilder = queryBuilder.contains("previousNumber", iPrevNumber); } const iOperator = $w("#iOperator").value; if (iOperator) { queryBuilder = queryBuilder.contains("operator", iOperator); } const iLivery = $w("#iLivery").value; if (iLivery) { queryBuilder = queryBuilder.contains("livery", iLivery); } const iName = $w("#iName").value; if (iName) { queryBuilder = queryBuilder.contains("name", iName); } const iDepot = $w("#iDepot").value; if (iDepot) { queryBuilder = queryBuilder.contains("depot", iDepot); } const iStatus = $w("#iStatus").value; if (iStatus) { queryBuilder = queryBuilder.contains("status", iStatus); } queryResults2 = await queryBuilder .limit(12) .ascending("class") .ascending("sort2") .ascending("sort") .find() .then ((queryResults2) => { let resultCount = queryResults2.totalCount; if (resultCount > 0) { $w("#repeater2").data = queryResults2.items; } else { $w('#text117').collapse(); $w('#repeater2').collapse(); $w('#loadingStrip1').collapse(); $w('#loadingGif1').collapse(); } }) .catch((err) => { let errorMsg = err; }); } export async function loadingStrip1_viewportEnter(event) { $w("#loadingGif1").show(); const nextResults = await queryResults2.next(); $w("#loadingGif1").hide(); queryResults2 = nextResults; const data = $w("#repeater2").data; $w("#repeater2").data = $w("#repeater2").data.concat(nextResults.items); console.log("Done loading more data"); } The part of the code that I have underlined, put in bold and coloured red is the code I added to enable the collapse of certain elements when a repeater is empty and it is since adding this that the export async function has stopped working. Everything else was in the code previously when the load more on scroll was working perfectly. I have been trying to fathom out what is causing it to stop working but haven't been able to so was hoping a second (and more experienced) pair of eyes might be able to spot my error? Thanks in advance!

Hi all, I am trying to develop a dropdown list which will direct the user to certain dynamic pages dependent on the choice they make from the dropdown. I am using 2 dropdowns with one of them having conditional filtering in place and the list that appears in dropdown2 being dependent on the choice made in dropdown1 - it is from dropdown 2 that I wish to have the link to other pages created. I have the conditional filtering aspect working fine but I am struggling to make the selections in dropdown2 redirect me to the relevant url. Below is the full code that I have tried: import wixLocation from 'wix-location'; import wixData from 'wix-data'; $w.onReady(function () { uniqueDropDown1(); pageChange(); }); function uniqueDropDown1 (){ wixData.query("NewsMenuDropdown") .limit(1000) .find() .then(results =>{ const uniqueTitles = getUniqueTitles(results.items); $w('#year').options = buildOptions(uniqueTitles); }); function getUniqueTitles(items) { const titlesOnly = items.map(item => item.year); return [...new Set(titlesOnly)]; } function buildOptions(uniqueList){ return uniqueList.map(curr => { return {label:curr, value:curr}; }); } } export function year_change_1(event, $w){ uniqueDropDown2(); $w('#dropdown2').enable(); } function uniqueDropDown2(){ wixData.query('NewsMenuDropdown') .contains("year", $w('#year').value) .limit(1000) .find() .then(results =>{ const uniqueTitles = getUniqueTitles(results.items); $w('#dropdown2').options = buildOptions(uniqueTitles); }); function getUniqueTitles(items) { const titlesOnly = items.map(item => item.monthYear); return [...new Set(titlesOnly)]; } function buildOptions(uniqueList) { return uniqueList.map(curr =>{ return {label:curr, value:curr}; }); } } function pageChange (){ $w('#dropdown2').onChange((event) => { let title = $w('#dropdown2').value; $w('#dataset1').onReady(() => { console.log("The dataset is ready to be filtered."); $w('#dataset1').setFilter(wixData.filter() .eq("monthYear", title) ) .then(() => { console.log("Dataset1 dataset is now filtered with the matching title from the dropdown"); let getItem = $w('#dataset1').getCurrentItem(); let url = getItem.url; wixLocation.to(url); }) .catch((err) => { console.log(err); }); }); }); } Can anyone point me in the right direction as to what I am doing wrong with this please? Thanks

Evening all, I am currently trying to set up a search function on my website which will consist of individual search bars for each field of my database collection. This will then allow the user to search for data using any number of search fields from just 1 right through to 8 searches to filter their results. The code I have used so far is: import {local} from 'wix-storage' import wixData from 'wix-data'; async function fetchData() { const firstPage = await wixData.query('Shunters') .limit(1000) .find(); const secondPage = await wixData.query('Shunters') .limit(1000) .skip(1000) .find(); const allItems = firstPage.items.concat(secondPage.items); return allItems; } $w.onReady(function () { var sameWord = local.getItem('searchWord'); $w('#iClass').value = sameWord; $w('#iClass').placeholder = sameWord; var sameWord2 = local.getItem('searchWord2'); $w('#iNumber').value = sameWord2; $w('#iNumber').placeholder = sameWord2; var sameWord3 = local.getItem('searchWord3'); $w('#iPrevNumber').value = sameWord3; $w('#iPrevNumber').placeholder = sameWord3; var sameWord4 = local.getItem('searchWord4'); $w('#iOperator').value = sameWord4; $w('#iOperator').placeholder = sameWord4; var sameWord5 = local.getItem('searchWord5'); $w('#iLivery').value = sameWord5; $w('#iLivery').placeholder = sameWord5; var sameWord6 = local.getItem('searchWord6'); $w('#iName').value = sameWord6; $w('#iName').placeholder = sameWord6; var sameWord7 = local.getItem('searchWord7'); $w('#iDepot').value = sameWord7; $w('#iDepot').placeholder = sameWord7; var sameWord8 = local.getItem('searchWord8'); $w('#iStatus').value = sameWord8; $w('#iStatus').placeholder = sameWord8; $w('#Shunters').onReady(function () { search(); }); }); export function searchButton_click_1() { search(); } let queryResults; function search(){ wixData.query('Shunters') .contains('class1', $w('#iClass').value) .contains('number', $w('#iNumber').value) .contains('previousNumber', $w('#iPrevNumber').value) .contains('operator', $w('#iOperator').value) .contains('livery', $w('#iLivery').value) .contains('name', $w('#iName').value) .contains('depot', $w('#iDepot').value) .contains('status', $w('#iStatus').value) .limit(12) .ascending('class1') .ascending('sort2') .ascending('sort') .find() .then(res => { queryResults = res; $w('#repeater1').data = res.items; }); } export function loadingStrip_viewportEnter(event) { $w('#loadingGif').show(); queryResults.next() .then(res => { $w('#loadingGif').hide(); queryResults = res; const data = $w('#repeater1').data $w('#repeater1').data = data.concat(res.items); console.log("Done loading more data") }) } As an example of what I want to be happening if I input "60" into the '#iClass' search bar, "Blue" in the '#iLivery' search box and "Active" in the '#iStatus' search bar, I would want it to search each of the 'Class', 'Livery' and 'Status' fields in my database collection and then return results that match each of the things type in to the search boxes, ignoring all of the search box fields that have been left empty. It is working to a certain extent but it is only returning results where all of the fields have data input in them. If any row of my database collection is missing one of the 8 fields I have set search bars up for, then it is not included in my results irrelevant of whether the empty field is one I have searched for or not. As an example, if I search "60" in the '#iClass' search bar and nothing else I receive a result of 1 item from the 100 that have 60 as the class because the other 99 have empty fields for 'Previous Number' where I would want to see all 100 items returned in that case. The 2 fields that are likely to have empty fields on rows are 'Previous Number' and 'Name' as not every item has data for these fields and if I remove both of these from my code, it works absolutely perfectly. I've tried to use the .and/.or in the wixData.query but to no avail and I have tried to set up a search function for each search bar but haven't managed to make this work either. Can anyone help me to a solution for this issue please? Thanks

Hi guys, I currently have a search bar set up which takes the user to a results page which is set up using a repeater. I have limited the results page to show 12 results max and have a 'Load More' button for the user to then bring up more results. I get the correct results as per the search and they show the correct number of results (ie 12 max) but when I then click on the 'Load More' button it just brings up all of the data from my dataset and completely disregards the search I have conducted. I have connected the button to my dataset and set it up to load more when clicked but can't seem to get it to bring up the next batch of results for my search. Is there some coding that is needed to get this to work? Thanks Matt