I am using a dropdown box to allow users to be redirected to different URLS based on the option they select.
This feature used to work but now it does not, the code I have written is below, any idea why this is not working?
Any help appreciated, thanks
import wixLocation from ‘wix-location’ ;
$w.onReady( function () {
$w( “#dropdown1” ).options = [
{ “label” : “View All Sports” , “value” : “URL” },
];
});
export function dropdown1_change(event) {
let gotoUrl = $w( “#dropdown1” ).value;
wixLocation.to(gotoUrl);
}
Have you checked it out on the live site?
yep, it was working and isnt. www.sports attic. co. uk
You may want to check this code to find out where the problem is.
Maybe there is only one value so don’t see a change in value, so check if it prints ‘change’
And maybe the address is wrong so try it.
import wixLocation from'wix-location';
$w.onReady(function () {$w("#dropdown1").options = [ {"label": "View All Sports", "value": "https://www.google.co.il/"},];});
exportfunction dropdown1_change(event) {
console.log("Change");
let gotoUrl = $w("#dropdown1").value; wixLocation.to(gotoUrl);
}
Even that doesnt seem to write the address. Its not picking up the URL, the only error I see in console is this ’ Loading the code for the Home page. To debug this code, open edh8o.js in Developer Tools.’
You might try to set dropdown1 manually without code.
Anyway you might want to include screenshots
Have a look at Nayeli (Code Queen) tutorial about it here.
Use dropdowns to navigate to another page on Wix - 8 lines of Code
https://www.totallycodable.com/example-dropdown-navigation
https://www.totallycodable.com/wix/corvid/use-dropdowns-to-navigate-to-a-different-page
For your code with the url added to the value for the dropdown itself, then you are best using Nayeli’s last chunk of code for manual settings.
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#dropdownManual").onChange((event) => {
let url = $w('#dropdownManual').value;
wixLocation.to(url);
});
});
Although, as stated above already, if you are only having the one option in your dropdown, then why use a dropdown for this?
It would just be easier to have a button which is linked to the external website instead.
export function viewAllSportsButton_click(event) {
wixLocation.to("https://www.sportsattic.co.uk");
}
Plus with you code for the dropdown…
$w("#dropdown1").options = [ {"label": "View All Sports", "value": "URL"},
The value should be the website address and not just URL…
GOS, I have used that exact code that is mentioned, if you read my post it is exactly the same as above code you pasted unless I am missing something. I have more than one option, but I delteted them for simplicity and testing, also I know it should not have URL there but I cant paste the URL in this forum as WIX blocks it.
Just remember that the dropdown value used in the dropdown settings must match the exact value used in your code, so if you have used url in your code that would mean that the dropdown setting is url as well.
Which would not take you anywhere as the value is simply url.
I set the value using the code
In your original code posted the value is url.
This must be the exact same value that you gave to the dropdown option, so the dropdown label would be View All Sports and that would be what the user sees on the dropdown list.
The dropdown value you have written as url, which would make the dropdown value that the dropdown links to simply url.
So when the drodown is changed the user will simply be going to url, which will go nowhere as it is not an actual web address it is simply the word url.
If you want to have actual url links then you need to have the actual web address set as the value either in the dropdown value settings through the editor itself or through the value in your dropdown options in code.
Have a look at the example linked along with the code samples and you will understand how to do it through either dropdown value settings as you want, or through a url field in your dataset.
Thanks GOS, yes I am very aware of this, the reason URL is there, is because WIX does not let you post URLS in this forum, in the code I have the actual URL and it goes nowhere - not even if I type a different URL Like google
This could be a WIX bug
How is it a bug when it all works fine.
https://givemeawhisky.wixsite.com/sportsattictest
import wixLocation from 'wix-location';
$w.onReady(function () {
$w("#myDropdown").options = [
{ "label": "View all Sports", "value": "https://www.sportsattic.co.uk" },
{ "label": "Wix", "value": "http://wix.com" }
];
});
export function myDropdown_change(event) {
let url = $w('#myDropdown').value;
wixLocation.to(url);
}
export function myDropdown1_change(event) {
let url = $w('#myDropdown1').value;
wixLocation.to(url);
}
What you probably assuming as a bug is the fact that the links will only work on a published site and not simply through your preview.
If it worked through your preview you would be moving out of your existing Wix Editor window and you will lose all of your work if not saved etc.
Thanks for the help here GOS. I assumed a bug as it used to work and now doesnt. See screenshots below. It is odd how it isnt working
Update - I have just added another dropdown on a seperate page to this and still have the same issue, could the error loading the code from home page be the issue, and if so how would I resolve?
@GOS He seems to be using the new X editor, and you are to the old editor. Maybe there is some difference?
However, as you wrote and wrote to him at first, he seems to be trying on the preview rather than the live site.
Check back on the live site.
