Hi Docentz:
Well your major problem is that you have a few errors in your javascript code.
The developer console is showing:
There was an error in your script
and also
Error: The element selector function (usually $w) cannot be used before the page is ready
These are essentially the same error and when encountered essentially stop your code from executing.
So what are the errors? Here goes:
-
You have too many onReady functions
You really only need one onReady function for Page code and one for Site code otherwise you will end up with confusing results. -
You need to use the $w scope selector inside the onReady function or an event handler
Both of your onReady functions are empty and so don’t do much for you.
$w.onReady(function() {
<---------- code you need to execute to set up your page goes here
});
You have a lot of code that follows your second onReady function call. When the code is loaded in the browser it trips over the first statement:
let sport = $w(‘SAsport’).value;
Since this code is using $w element selector for the SAsport element before the onReady has fired then an error is generated because Wix hasn’t finished loading the page elements and the element probably doesn’t exist yet. The simple fix for this is to delete the onReady code on lines 5 and 6 and delete the code on line 31
});
and add it after the code that follows onReady on line 117.
- You have two SAsport onChange handlers
One is called
export function SAsport_onchange(event, $w)
The other is called
$w(‘#SAsport’).onChange(function () {
Each does something different so may not produce the results you are looking for. better to have one function and make sure it does what you want :-).
-
Your call to sportfilter has two sets of parentheses
sportfilter()(); should be sportfilter(); -
Your call to positionFilter has two sets of parentheses
positionFilter()(); should be positionFilter(); -
Redundant .then() call after fetch function call
You have two .then() calls following the fetch in:
$w(‘#button1’).onClick(…
The second is redundant as it will only repeat the first console.log call (at least in as far as it will
display the json property again).
.then(function(httpResponse) {
console.log(JSON.stringify(httpResponse)); <-------+
return httpResponse.json(); |
}) |
These do similar things
// This code VVVVVVV is redundant |
.then(function(output){ |
console.log(JSON.stringify(output)); <-------+
})
Here is the code modified per these comments. But I am not promising it will work because I don’t have access to your Wix Editor. The link above doesn’t do it. I would need contributor access to your page. However all things being equal this should help move you further forward than you are at the moment 
Steve
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import {fetch} from 'wix-fetch';
import wixData from 'wix-data';
//Delete this code...
//$w.onReady(function () {
//});
//from gender
export function gender2_onchange(event, $w) {
$w("#SAsport").enable();
sportFilter(); // Remove second pair of ()
}
function sportFilter (){
$w("#indexsport").setFilter(
wixData.filter()
.eq("gender", $w("#gender2").value)
);
}
//Redundant onchange function call removed
//export function SAsport_onchange(event, $w) {
// $w("#SApositionbysport").enable();
// positionFilter(); // Remove second pair of ()
//}
function positionFilter (){
$w("#indexpositions").setFilter(
wixData.filter()
.eq("sport_name", $w("#SAsport").value)
);
}
$w.onReady(function () {
// Remove this --> });
let sport = $w('#SAsport').value;
console.log($w('#SAsport').options);
console.log($w('#SAsport').value);
console.log("http://www.docentz.com/positions/"+$w('#SAsport').value);
$w('#SAsport').onChange(function () {
// ADD CODE FROM Other onchange function commented out above
$w("#SApositionbysport").enable();
positionFilter(); // Remove second pair of ()
// ORIGINAL CODE
sport = $w('#SAsport').value;
//fetch("http://www.docentz.com/positions/"+sport, {method: "GET"})
fetch("http://www.docentz.com/positions/basketball"+sport,
{method: "GET"}
)
.then(function(httpResponse) {
console.log(JSON.stringify(httpResponse));
return httpResponse.json();
});
})
/*
$w('#input13').onChange(function () {
fetch("http://www.docentz.com/majors", {method: "GET",
headers: {"Content-Type": "text/plain"},
body: JSON.stringify({"q": $w('#input13')})
})
.then(function(httpResponse) {
console.log(JSON.stringify(httpResponse));
return httpResponse.json();
})
.then(function(output){
console.log(JSON.stringify(output));
})
})
*/
$w('#button1').onClick(function () {
let sa_item;
let b_item;
sa_item = $w('#dataset2').getCurrentItem();
console.log(JSON.stringify(sa_item));
b_item = $w('#dataset1').getCurrentItem();
console.log(JSON.stringify(b_item));
let inputs = {
"last_name": sa_item["lastName"],
"first_name": sa_item["firstName"],
"email": sa_item["email"], // How is this email different from the bracket email?
"gender": b_item["gender"], // Why would the gender not be with the student athlete info instead of the bracket?
"high_school": b_item["currentSchool"], // Why would this not be in the student athlete info?
"resident": b_item["currentResidence"], // Why would this not be in the student athlete info?
"majors": b_item["major"], // Do we only want to ask about 1 major and not multiples?
// "majors": "39", // Placeholder until dropdown works
"states": b_item["statePreference"], // Should be able to pick all
"year": b_item["grade"], // Why not name this year instead of grade? Fitting for transfers too. Does not have year transfer
"sport": b_item["sport"],
"size": b_item["collegeSize"],
"counselor_name": b_item["counselorName"],
"counselor_email": b_item["counselorEmail"],
"gpa": b_item["gpa"],
"college_type": b_item["collegeType"],
"interested": b_item["inContact"], // Multiples?
"sat": b_item["sat"],
"act": b_item["act"],
"alma_mater": b_item["almaMater"], // Multiples?
"division": "All", // MISSING!! Defaulting to all for now
"phone": "", // MISSING!! Leaving empty
"coach_name": "", // MISSING!! Leaving empty
"coach_email": "", // MISSING!! Leaving empty
"position": "forward", // MISSING!! Need to know the sport position
"result_id": b_item["_id"],
"student_id": sa_item["_id"]
};
// SA Name should probably be SA ID so that you can relate it back to the SA db easily
fetch("http://www.docentz.com/submit",
{
method: "POST",
headers: {"Content-Type": "application/x-www-form-urlencoded"},
body: JSON.stringify(inputs)
}
)
.then(function(httpResponse) {
console.log(JSON.stringify(httpResponse));
return httpResponse.json();
})
// Removing following code as it is redundant
//.then(function(output){
// console.log(JSON.stringify(output));
//})
.catch(err => console.log(err));
});
}); // <------- add this to complete the $w.onReady() call.