Hello everyone.
I need some help in linking my table search results to the corresponding dynamic member page.
I’m creating a tutor site and I want students to be able to search by subject, then click on the results to be redirected to the said member’s page.
this is my code so far
but when i test this out, it tells me undefined is an unsupported URL.
Any help would be greatly appreciated! I have no coding experience
Hello Birju Sonigra,
if you have an ERROR which tells you “undefined”, then you have an variable which was not setted (so it is undefined and has no value).
WixLocation tries to go to an UNDEFINED URL, that mens something is wrong in your URL-constalation.
Looking at your CODE, i would not say that you have NO experience in coding.
Where did you COPY it? 
Yes I have no coding skill, I think I just copied it from one of the links here on wix’s
So what does it mean when you say my URL -consolation is wrong?
Do you want to achieve a similar project as this user here ?
https://www.wix.com/corvid/forum/community-discussion/dynamic-filtering-of-repeater
Yes something similar, I think im close. I just don’t understand why the URL is wrong
I think you should start from scratch!
The code i see in your given pic —> total bullshit, sorry!
Code in line 74 should stay in the FIRST line! What does it do there?
I think you do not tell everything about your project.
You are using a table and a table has rows. Every of that tables rows is the current indexNumber of your databases rows.
Use some consolo-logging, then you will see better what you are doing and which results you get.
Thank you!
So for this project, i want users to be able to search by subject, and the results will all show on a table.
So far this works fine.
I then want users to be able to click on a row and be taken to that member’s page where they will get more information about the tutor. This is the part i am struggling with
So subject search results in the table just fine,
but this is the error i get “rangeError: Maximun call stack size exceeded”
I’m not too sure what this means or how to sort it
Can you post your whole code in CODE-TAGS here?
Maximum call-stack, looks like you have reached the maximum data (1000).
But not sure.
import wixData from ‘wix-data’ ;
import wixLocation from “wix-location” ;
export function search_click(event) {
wixData.query( “Team” )
.contains( “subjects” ,$w( “#Subject” ).value)
.find()
.then(res=>{event
$w( “#TutorResult” ).rows=res.items;
$w( “#TutorResult” ).expand();
});
$w.onReady( function (){
$w( “#TutorResult” ).columns = [
{
“id” : “col1” , // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath” : “photo” ,
“label” : “Profile Pic” , // The column header
“width” : 100 , // Column width
“type” : “image” , // Data type for the column
},
{
“id” : “col2” ,
“dataPath” : “title” ,
“label” : “Name” ,
“width” : 100 ,
“type” : “Text” ,
“linkPath” : “link-title” ,
},
{
“id” : “col3” , // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath” : “jobTitle” ,
“label” : “Job” , // The column header
“width” : 100 , // Column width
“type” : “Text” , // Data type for the column
}, // more column objects here if necessary
{
“id” : “col4” , // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath” : “location” ,
“label” : “Location” , // The column header
“width” : 100 , // Column width
“type” : “text” , // Data type for the column
},
{
“id” : “col5” , // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath” : “grades” ,
“label” : “Grade” , // The column header
“width” : 100 , // Column width
“type” : “text” , // Data type for the column
},
{
“id” : “col6” , // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath” : “rating” ,
“label” : “Rating” , // The column header
“width” : 100 , // Column width
“type” : “image” , // Data type for the column
},
]}
)}
export function searchList_change(){
wixData.query( “level” )
.contains( “grades” , $w( “#dropdown1” ).value)
.find()
.then(res=>{
$w( “#TutorResult” ).rows=res.items;
});
}
export function TutorResult_rowSelect(event,$w) {
console.log(TutorResult_rowSelect(event, $w))
let rowData = event.rowData;
let rowIndex=event.rowIndex;
const myRow=event.target.rows[rowIndex];
wixLocation.to(`${myRow[ “team/{Name}” ]})
}
export function dropdown1_change(event) {
// Runs a query on the “tutors” collection
wixData.query( “grades” )
// Query the collection for any items whose “grade” field contains
// the value the user selected in the dropdown
.contains( “grades” , $w( “#dropdown1” ).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w( “#TutorResult” ).rows = res.items;
});
}
export function TutorResult_cellSelect(event) {
let rowData = event.rowData;
let rowIndex=event.rowIndex;
const myRow=event.target.rows[rowIndex];
wixLocation.to(${myRow[ "team/{Name}" ]})
}
What do you think?
@birjusonigra1997
Did not find the time yet to take a look at this.
This will take more time then just few minutes.
You will have to wait, or someone else perhaps will help you faster.
@russian-dima thank for your help
Try this…
import wixData from 'wix-data';
import wixLocation from "wix-location";
export function search_click(event) {
wixData.query("Team")
.contains("subjects",$w("#Subject").value)
.find()
.then(res=>{event
$w("#TutorResult").rows=res.items;
$w("#TutorResult").expand();
});
$w.onReady(function (){
$w("#TutorResult").columns = [
{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "photo",
"label": "Profile Pic", // The column header
"width": 100, // Column width
"type" :"image", // Data type for the column
},
{
"id": "col2",
"dataPath": "title",
"label": "Name",
"width": 100,
"type": "Text",
"linkPath":"link-title",
},
{
"id": "col3", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "jobTitle",
"label": "Job", // The column header
"width": 100, // Column width
"type": "Text", // Data type for the column
},// more column objects here if necessary
{
"id": "col4", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "location",
"label": "Location", // The column header
"width": 100, // Column width
"type": "text", // Data type for the column
},
{
"id": "col5", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "grades",
"label": "Grade", // The column header
"width": 100, // Column width
"type": "text", // Data type for the column
},
{
"id": "col6", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "rating",
"label": "Rating", // The column header
"width": 100, // Column width
"type": "image", // Data type for the column
},
]}
)}
export function searchList_change(){
wixData.query("level")
.contains("grades", $w("#dropdown1").value)
.find()
.then(res=>{
$w("#TutorResult").rows=res.items;
});
}
export function TutorResult_rowSelect(event,$w) {
console.log(TutorResult_rowSelect(event, $w))
let rowData = event.rowData;
let rowIndex=event.rowIndex;
const myRow=event.target.rows[rowIndex];
wixLocation.to(`${myRow["team/{Name}"]}`)
}
export function dropdown1_change(event) {
// Runs a query on the "tutors" collection
wixData.query("grades")
// Query the collection for any items whose "grade" field contains
// the value the user selected in the dropdown
.contains("grades", $w("#dropdown1").value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w("#TutorResult").rows = res.items;
});
}
export function TutorResult_cellSelect(event) {
let rowData = event.rowData;
let rowIndex=event.rowIndex;
const myRow=event.target.rows[rowIndex];
wixLocation.to(`${myRow["team/{Name}"]}`)
}
This part is strange…
export function search_click(event) {
wixData.query("Team")
.contains("subjects",$w("#Subject").value)
.find()
.then(res=>{event
$w("#TutorResult").rows=res.items;
$w("#TutorResult").expand();
});
$w.onReady(function (){
$w("#TutorResult").columns = [
{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "photo",
"label": "Profile Pic", // The column header
"width": 100, // Column width
"type" :"image", // Data type for the column
},
{
"id": "col2",
"dataPath": "title",
"label": "Name",
"width": 100,
"type": "Text",
"linkPath":"link-title",
},
{
"id": "col3", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "jobTitle",
"label": "Job", // The column header
"width": 100, // Column width
"type": "Text", // Data type for the column
},// more column objects here if necessary
{
"id": "col4", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "location",
"label": "Location", // The column header
"width": 100, // Column width
"type": "text", // Data type for the column
},
{
"id": "col5", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "grades",
"label": "Grade", // The column header
"width": 100, // Column width
"type": "text", // Data type for the column
},
{
"id": "col6", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "rating",
"label": "Rating", // The column header
"width": 100, // Column width
"type": "image", // Data type for the column
},
]}
)}
Especially this one…
export function search_click(event) {
wixData.query("Team")
.contains("subjects",$w("#Subject").value)
.find()
.then(res=>{event
$w("#TutorResult").rows=res.items;
$w("#TutorResult").expand();
});
$w.onReady(function (){
$w("#TutorResult").columns = [
{
OnReady should be the starting point.
Thanks for your help here. Unfortunately I still get the error Maximum call stack size exceeded?
The error could also come from here…
$w("#TutorResult").columns = [
{
"id": "col1", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "photo",
"label": "Profile Pic", // The column header
"width": 100, // Column width
"type" :"image", // Data type for the column
},
{
"id": "col2",
"dataPath": "title",
"label": "Name",
"width": 100,
"type": "Text",
"linkPath":"link-title",
},
{
"id": "col3", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "jobTitle",
"label": "Job", // The column header
"width": 100, // Column width
"type": "Text", // Data type for the column
},// more column objects here if necessary
{
"id": "col4", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "location",
"label": "Location", // The column header
"width": 100, // Column width
"type": "text", // Data type for the column
},
{
"id": "col5", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "grades",
"label": "Grade", // The column header
"width": 100, // Column width
"type": "text", // Data type for the column
},
{
"id": "col6", // ID of the column for code purposes
// The field key in the collection whose data this column displays
"dataPath": "rating",
"label": "Rating", // The column header
"width": 100, // Column width
"type": "image", // Data type for the column
},
]}
)}
Do a test-run without this code-part.
That seems to have solved it. My problem now is that the field that links the dynamic page is blanked out until I hover over it?
Yes you had a problem with the column-setting of your table.
Try to recode it, and do a test after every new added colum (by code).
