Linking search results in a table to a dynamic page

Hello all,

I’m building a website that allows users to search for a company based on the name and returns the results in a table. I would then like to link the search results to a dynamic page that provides more details of the company.

I’ve added the database of companies and built the search function and table based on the following code:

This gives the following results on the site when searching for “Smith”:


I’m now trying to link this results table to a dynamic page so that when a row is selected and clicked the user will be taken to a page containing more detailed information about the company.

I’ve found the following code in the Forum which I think will achieve this:

Unfortunately I’m a world-class beginner at website coding and I have no idea what code to enter for this line as I don’t know the syntax for my dynamic page:

wixLocation.to (${myRow[link-myDynamicPage-_id]});

Is the code above the correct code to use for what I am trying to achieve (ie linking my search results to a dynamic page)?

I’d also like the information that appears on the dynamic page to appear as a table with the headings along the left-hand side. I can only find tables that have headings across the top and as there are 20 fields of data this is impractical for displaying the information. My current dynamic page just had text fields for the results but this is quite cumbersome:

Sorry this turned into such a long post! I’d be really grateful for some assistance as I’m a little lost with this problem.

Thanks so much in advance,
Huw

1 Like

Hi Huw!

Yes, this code will make you able to navigate to the dynamic page of certain item in a row but it needs a bit modification.

First add an “onRowSelect” event to your table as described here:

Now add the following code snippet to the page’s code editor:

import wixLocation from 'wix-location';

export function table1_rowSelect(event, $w) {
    let rowData = event.rowData;
    let rowIndex = event.rowIndex;
    const myRow = event.target.rows[rowIndex];
    wixLocation.to(`${myRow[link-myDynamicPage-_id]}`)
}

Note that ‘myDynamicPage’ from the code snippet should be changed and adjusted to whatever your dynamic page is called (in your site), as well as the table itself and the function’s name.


As for the other goal of yours -
Please feel free to post a Feature Request in the dedicated page if you cant find what you’re looking for or design your own workaround using the components we have.

You can also check with Wix Support, since this issue is not code related then they might know better regarding components with such characteristics.

Hope that helps.

Doron. :slight_smile:

Thanks so much, Doron - I really appreciate your time and help.

I’m a completely beginner at all this and I can’t seem to get the syntax right for the myDynamicPage and just keep getting an error message with all the variations I’ve tried:


This is the dynamic page I am trying to link to:

Am I missing “” or / or something? Is it the whole website URL link? I’ve been unable to track down a similar example from the Forum to compare to.

Again, thank you for your help on this.

Best,
Huw

Hi again!

Please share a link to your site so I’ll be able to inspect it and provide you with a solution.

Doron.

Hey Doron,

Thanks for your message. I’m sorry for the late reply - I’ve been unable to log in to the Code Forum for a couple of days due to a “bad gateway” issue.

The URL for the page is https://www.textboxdigital.com/searchboxtest

You’ll be prompted to sign up to enter the page. If it’s easier to access my Editor then please let me know.

Thanks again for your help.

All best,

Huw

Hi!

I’m looking at the page “searchBOX tool” and can see that you’ve added an event to the table but the function does not exists in the code editor.
Please add the relevant function with the code we’ve supplied and update this thread about the results.

Doron.

Hey Doron,

Sorry, I had removed the function with the code as the error was making the whole page incorrect. I’ve added in the code now:


The error is the “link-myDynamicPage-_id” is not defined. I should imagine because I am not entering the correct syntax for the dynamic page.

Thanks so much,
Huw

Hello Doron,

Were you able to see the error messaging? Any help would be greatly appreciated.

All best,
Huw

Hi Huw!

I’ve looked into your site again and did some testing.
After I’ve added a table to the relevant page (that is missing currently) I managed to modify the code and as for now it’s working as expected.
This is the code I’ve used:

export function table1_rowSelect(event, $w) {
    let rowData = event.rowData;
    let rowIndex = event.rowIndex;
    const myRow = event.target.rows[rowIndex];
    wixLocation.to(`${myRow["link-searchBOXdatabase-imprint"]}`)
}

Let me know if it works out for you and don’t forget to add a table and the relevant event to it.

Doron.

Hey Doron,

Thanks so much for the quick reply. That’s great - it’s all up and working now. I really appreciate your time and patience on this one. Thanks very much and have a great day.

Huw

You’re most very welcome :slight_smile:

Hello @doron-alkalay ,

Good day! I am also trying to set up a search with my very first database collection. I can follow through to set up a search box, a search button and a table showing the search results, which made my day! However, I am having no luck with the link required for the row click event which directs users to the relevant dynamic page. Would you mind helping me please?
Plus, can I show a message like “The search term is not available. Please try again.” to the user if I don’t have that in the database? Here’s my link & the code snippet: https://wix-hk.wixsite.com/glossary
Thank you so much in advance!

Stella

Hey Stella!

It seems like the event handler that you’ve added (affected by the name of the component),
and the actual function that you used is different by name.


The event handler that was declared is " tableResults_rowSelect " while the function was named " table1_rowSelect ".

In order to create a correlation between the event and the function, they should have the same name.

Try to change it and let me know if it works for you!

Doron.

Hello @doron-alkalay ,

Thanks so much for your reply. Nice to have you to guide me through. Silly mistakes I had. Now I have changed the event handler ID to the correct one:

However, I’m still not very certain with the code I need after wixLocation.to , and I was using some Chinese characters as the id of the dynamic page. Now I have changed that into English as “title”, but I am still getting the SDK error:

Here is the dynamic page I am trying to link to:


I’d very much appreciate if you could help me to sort this out! Thank you very much!

Hi again Stella!

You’d obviously need to adjust the code to fit with your site (Pages name, components Id’s, etc.)
The error you’re getting is due to the fact that [“link-news-title”] does not exist in your site and so - it is undefined.

Please adjust the code according to the directions above and post it again if you’re stuck :slight_smile:

Doron.

Hey All, I am in a similar kind of situation as been discussed above, basically I have database of approx 7000 rows with 11 columns containing different data as in attached image, so I have a search bar on my home page, I do have created dynamic page with data set and linked all fields, but when I search for name, for example from below image “credit union”, search results show all the page containing word “credit union”.
So what I want is that search result shows only the particular dynamic pages containing the word “credit union” and not from the whole site, and when we click on any search result, the respective dynamic page opens up.
is it possible?

Old post from 2018 being closed.

Please add a new forum post with a link to refer back to this post rather than bumping up an old thread from 2018.

As for the issue, the code is using contains whereas you will need to use eq.

contains( )
Refines a query or filter to match items whose specified property value contains a specified string.
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#contains

eq( )
Refines a query or filter to match items whose specified property value equals the specified value.
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#eq