Dynamic Page URL not changing when page changes

Ask the community
,
1

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

2

I have been continuing to research this issue and have made slight progress.
From the code in my initial post I have replaced:

let url = getItem.url;

with

let url = wixLocation.to('/class-20-loco-data/${$w("#numberDropDown").value}');

This amendment now sees the url change when I click on one of the dropdown options but unfortunately it changes to https://www.ukraillog.co.uk/class-20-loco-data/${$w(%22 which, rightly, brings up a 404 error message. If I overtype the ‘$%7B$w(%22’ part of the url with a number from the dropdown list, it correctly takes me to the relevant page but then if I click on a dropdown option again it reverts back to the incorrect url.

I feel like this has taken me a step closer to a solution but could do with the expertise of this forum to point me towards the finish line please :slight_smile:

Thanks

3

Fixed it :slight_smile:
This:

let url = wixLocation.to('/class-20-loco-data/${$w("#numberDropDown").value}');

Should have been:

let url = wixLocation.to(`/class-20-loco-data/${$w("#numberDropDown").value}`);

with backticks (`) on the url and not single quotations (')

4

I am having the same issue, when I click on a page from the drop down menu, there is a brief sighting of another page. I have no idea how to fix this and it looks terrible!