I am new to the HTML/CSS/JAVASCRIPT world. I understand the logic involved in programming and have used some of the examples from the tutorials to create a database collection and search fields. I have successfully designed a website with three User Input fields, all of which operate independently. And, I have successfully designed another website with one User Input and One Drop Down. However, I cannot add a second drop down without getting a “Parsing Error, export functions must be at the top level”. Here is my code so far. I would appreciate any help that is available.
Thank you.
import wixData from “wix-data”;
let debounceTimer;
//search by title
export function iTitle_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value,);
}, 200);
}
let lastFilterTitle;
function filter(videoTitle) {
if (lastFilterTitle !== videoTitle) {
let newFilter = wixData.filter();
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘videoTitle’,videoTitle));
lastFilterTitle = videoTitle;
}
}
//search by category
export function dropdown1_change(event,$w) {
// Runs a query on the “LHAUGVideo31” collection
(wixData.query(“LHAUGVideo31”))
// Query the collection for any items whose “Name” field contains
// the value the user selected in the dropdown
.contains(“category”, $w(“#dropdown1”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table1”).rows = res.items;
});
//search by instructors
export function dropdown2_change(event,$w) {
// Runs a query on the “LHAUGVideo31” collection
(wixData.query(“LHAUGVideo31”))
// Query the collection for any items whose “Name” field contains
// the value the user selected in the dropdown
.contains(“instructors”, $w(“#dropdown2”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table1”).rows = res.items;
});
$w.onReady( function () {
$w(“#table1”).columns = [
//COLUMN 1 DATE
{ “id”: “col1”,
“dataPath”: “date”,
“width” :100,
“label”: “Date”,
“visible”: true ,
“type”: “date”,
“linkPath”: “link-field-or-property”},
//COLUMN 2 TITLE
{
“id”: “col2”, // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath”: “videoTitle”,
“label”: “Video Title”, // The column header
“width”: 150, // Column width
“type”: “string”, // Data type for the column
// Path for the column if it contains a link
“linkPath”: “link-field-or-property”
},
//COLUMN 3 DESCRIPTION
{ "id": "col3", // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath”: “videoDescription”,
“label”: “Description”, // The column header
“width”: 250, // Column width
“type”: “string”, // Data type for the column
// Path for the column if it contains a link
“linkPath”: “link-field-or-property”},
//COLUMN 4 CATEGORY
{ "id": "col4",
“dataPath”: “category”,
“label”: “Category”,
“width” :90,
“visible”: true ,
“type”: “string”,
“linkPath”: “link-field-or-property”},
//COLUMN 5 PRESENTERS
{ “id”: “col5”,
“dataPath”: “instructors”,
“label”: “Presenters”,
“width” :100,
“visible”: true ,
“type”: “string”,
“linkPath”: “link-field-or-property”},
//COLUMN 6 URL
{ “id”: “col6”,
“dataPath”: “videoLink”,
“label”: “Category”,
“width” :150,
“visible”: true ,
“type”: “URL”,
“linkPath”: “link-field-or-property”},
// more column objects here if necessary
// …
// …
];
});