How can I link a dropdown user input element to a dynamic page?

Discussion Ask a question
,
1

Hi guys,
I want to connect a dropdown user input element to a dynamic page. So, when users click on an item of the dropdown list, they are redirected to the related dynamic page. I’m gonna explain it better:

1- I create a page with a dataset connected to the collection which has my relevant dynamic page connected;
2- I insert a dropdown user uinput element (pic. 1);

3- I connect #dropdown1 with the collection so that all the items displayed correspond to a column (in this case, the column name’s “Heading 1”. Pic. 2);

994×657 70.3 KB

4- The preview effect is this: pic. 3. Maybe someone can also explain to me why I see the “failed to fetch” error in the console?

1057×424 14.4 KB

5- Now I want that the user, once he clicks on a dropdown’s item, “e-commerce” for example, goes to its related dynamic page (pic. 4).

So guys how can I do this? Please, if you know how to help me, write exactly step by step what I have to do.

Thanks for your time and patience!

2

@chickenmangoblog

I’d suggest opening the properties panel under the tools panel in the header, then add an onChange to the dropdown. Underneath that onChange, add the following code:

wixLocation.to(`/Digital-marketing-courses/${$w("#dropdown1").value}`);

oh, and remember to add this to your page code right at the top:

import wixLocation from 'wix-location';

Best of luck!
Tiaan

3

Hi Tiaan (@tiaan),
Thank you for the reply.

So, I inserted the code as you told me: pic. 1;

1920×1459 280 KB

Then I previewed the website, selected the item I wanted from the dropdown (pic. 2):

Then, I clicked on the item, but it didn’t redirect me to its related dynamic page (pic. 3). It just showed the element selected without doing any action.


What’s wrong?

Thank you in advance for your support.

4

@chickenmangoblog

Open the dynamic page in the editor, then copy from the page info the page url over for the ‘Digital-marketing-courses’ section - yours should look something like this: ‘Digital-marketing-courses/{title}’

I think my spelling might just not be exactly what your url is…

In this screenshot it’s ‘Members/{ID}’

1057×327 54.7 KB

5

@Tiaan,
Thank you very much for the support, you were right. However, now I view a different error message .

I corrected the url in the code (pic. 1):

1412×853 63.1 KB

And, as you see from pic. 2, the url is correct:

1198×737 33.2 KB

But once I preview the site, I view this error message (pic. 3):

949×468 22 KB

Another incorrect information is the url retrieved showed by the error message . The correct url for the dynamic page doesn’t have the final folder (e.g. “INNOVATION” as showed on pic. 3). As you can see from pic. 4 the dynamic pages urls are the following:

On the live site instead, it still doesn’t happen anything. Like before. Is it only me who is experiencing this issue?

Do you know what happens?

6

@chickenmangoblog

Yes, you need to remove the ‘/{Title}’ from the coded url - this is replaced by the dropdown value. Then it should work!

Like so:

wixLocation.to(`/digital-marketing-courses/${$w("#dropdown1").value}`);
1 Like
7

@Tiaan
WOW! Great Tiaan! It works!

Thank you!

8

Awesome! Glad I could help…

1 Like
9

@Tiaan,
I’m really sorry to bother you again, but it seems your code works only for items that are a single word.

The code works only for the item “e-commerce” (which is the only item I tried to click on before), but if you try to click on the others which are formed by more than one word you view an error.

On pic. 1 there are the dropdown’s items (I remember you that they are also elements of a column in a collection):

Now, see the error if I click on an item which is formed more than one word (pic.2):

814×596 32.7 KB

As you can see, the url is not complete. Why does it cut the url? Because, if it uses the items of the dropdown, it should add a “-” to connect words, otherwise it should use the actual links of my dynamic page…

10

try adding a ‘.replace(" “,”-")’ to your code like this:

wixLocation.to(`/digital-marketing-courses/${$w("#dropdown1").value.replace(" ","-")}`);

should work…

1 Like
11

@Tiaan,
Super thanks! if you were in Italy I would have offered you a Spritz! haha

Thank you again!

12

@tiaan
Hi Tiaan how are you? I’m following your posts, they are really inspiring!

Regarding these dropdown clickable elements, I found another issue. The dropdown creates a link only if an item is formed up to two words.

For example (pic. 1):

886×459 23.8 KB

As you can see the whole item is “INNOVATION AND PRODUCTS”, but it is cut from “AND”. So, for this reason, all the items’ links formed by more than two words don’t work. How can I solve this issue? I have items formed up to three words.

13

@chickenmangoblog

Thanks for the compliment!

This should work… Are there perhaps tow spaces or another character between ‘AND PRODUCTS’?

14

@tiaan

Supposing you meant “two spaces”, I confirm: there is just only one space…

15

Hmm…, perhaps try stringing to .replaces after one another like this…

courses/${$w("#dropdown1").value.replace(" ","-").replace(" ","-")}`);
16

@tiaan

Yeah you’re right, I’ve just published and now it seems working. Such a puzzle!

Thank you again!

17

Yeah, sometimes trial and erros is the only way with these things…

Happy it worked!

18

Ok, I’ll go launch some reusable rockets made of paper and wood, it would be easier

19

Hi
I have followed this post for the way to connect a dynamic page from drop-down list. But a error message when connecting to the page. see below.

Can anyone help with this issue?

1123×567 18 KB

1740×739 227 KB

20

Old post reappearing, closed.
Please add a new forum post if help still needed.