Hey All,
I know this subject has been covered in depth several times and I have spent several hours reading through all of the forum posts but I cannot seem to figure out what I am missing in my code. I have 2 repeaters which display Past & Current events connected to 2 filtered datasets for each purpose. I show/hide one or the other to create a slider animation as you can see. I want to add the ability to filter each repeater by Sport and toggle back and forth between Past & Current events. Currently I am trying to get the filter code to work for the Current events before I apply it to Past events as well. I’m pretty code savvy I’m just still trying to understand how Wix handles this stuff.
Also not sure why my filter function is highlighted in all purple.
Page address is: https://www.fullsendhq.com/ev
Thanks for any help!
import wixData from ‘wix-data’;
let curEvents = ;
$w.onReady( function () {
//-----------------------------------------Query to get the current event information from the database
let curQuery = wixData.query(“Events”)
.eq(“month”, “”)
.find()
.then((results) => {
curEvents = results.items; //put results in array for easy filtering
$w(#currentevents).data = curQuery; //link results in current events table
})
. catch ((err) => {
let errorMsg = err;
});
//Set the information to the current events repeater
$w(#currentevents).onItemReady(($w, itemData) => {
//add here all the relevant elements of the repeater. In this case, I’ve added a text and an image to the repeater
$w(“#curname”).text = itemData.eventName;
$w(“#curlocaton”).text = itemData.location;
$w(“#curdate”).date = itemData.startDate;
$w(‘#curimg’).src = itemData.Image;
});
});
function filterResults(results){
const sport = $w(‘#sportfilter’).value;
if (sport && sport !== ‘Filter By Sport’) {
results = results.filter(item => item.sport === sport);
}
return results;
}
export function sportfilter_change(event, $w) {
//filtering the results
const filteredResults = filterResults(curEvents);
//setting the data
$w(#currentevents).data = filteredResults;
//setting the repeater elements
$w(#currentevents).onItemReady(($w, itemData) => {
console.log(itemData.title);
$w(“#curname”).text = itemData.eventName;
$w(“#curlocaton”).text = itemData.location;
$w(“#curdate”).date = itemData.startDate;
$w(‘#curimg’).src = itemData.Image;
});
}
//--------------------------------------------------------------------------------
//----------------------------------------------------Past/Current Events & Slider Animation
let slideOptionsR = {
“duration”: 1000,
“delay”: 100,
“direction”: “right”
};
let slideOptionsL = {
“duration”: 1000,
“delay”: 100,
“direction”: “left”
};
export function pasteventsbutton_click(event) {
$w(‘#currenteventstitle’).hide(“slide”,slideOptionsR);
$w(‘#currentevents’).hide(“slide”,slideOptionsR);
$w(‘#pasteventstitle’).show(“slide”,slideOptionsL);
$w(‘#pastevents’).show(“slide”,slideOptionsL);
}
export function currenteventsbutton_click(event) {
$w(‘#pasteventstitle’).hide(“slide”,slideOptionsL);
$w(‘#pastevents’).hide(“slide”,slideOptionsL);
$w(‘#currenteventstitle’).show(“slide”,slideOptionsR);
$w(‘#currentevents’).show(“slide”,slideOptionsR);
}
//----------------------------------------------------Past/Current Events & Slider Animation
