Hi everybody
I’m building a website, where I need to show recurring meetings in a list. They have reference tables in the DB to the region (canton) and the weekday.
In the onready function I first fetch the data, including the references, sort the meetings first by canton then by weekday and add them to the repeater.
This works in the preview and in some browsers (like Firefox) but not in others (like Chrome, Safari). It doesn’t matter, if mobile or Desktop, the behavior is the same.
When it does not work, it does show the correct amount of entries in the repeater, but only with the placeholder values. The repeater itself has the correct data, as it shows in the console (see screenshot below)
I also have two dropdownlists to filter the list by canton and weekday respectively. If I filter the list twice, the data appears in the list.
This is the code I’m using.
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixData from "wix-data";
import wixWindow from 'wix-window';
var allMeetings;
var isMobile = wixWindow.formFactor !== 'Desktop';
function showMeetingsTable () {
if (isMobile) {
$w('#rptMeetingsMobile').show();
} else {
$w('#rptMeetingsMobile').hide();
}
}
function fetchMeetings() {
return wixData.query('Meeting')
.include('weekday')
.include('canton')
.include('language')
.find();
}
function sortMeetingsByCantonAndWeekday(result) {
let meetings = result.items;
let sorted = meetings.sort((first, second) => {
let dayOrder = first.weekday.dayNr - second.weekday.dayNr;
let cantonOrder = first.canton.abbrevation.localeCompare(second.canton.abbrevation);
if (isMobile || cantonOrder === 0){
return dayOrder;
}
return cantonOrder;
});
console.log('sorted');
console.log(sorted);
allMeetings = sorted;
return sorted;
}
function addMeetingsToRepeater (meetings) {
console.log('adding meetings');
console.log(meetings);
if (isMobile) {
$w('#rptMeetingsMobile').data = meetings;
} else {
console.log('adding meetings to desktop version');
$w('#rptMeetings').data = meetings;
}
console.log($w('#rptMeetings'));
}
function filterMeetingsByCanton (cantonName) {
let filtered = allMeetings.filter((element) => {
return element.canton.title === cantonName;
});
return filtered;
}
function filterMeetingsByWeekday (weekday) {
console.log('filter by weekday');
console.log(allMeetings)
let filtered =allMeetings.filter((element) => {
return element.weekday.title === weekday;
});
return filtered;
}
$w.onReady(function () {
showMeetingsTable(isMobile);
fetchMeetings()
.then(sortMeetingsByCantonAndWeekday)
.then(addMeetingsToRepeater);
});
export function ddlCantonFilter_change(event) {
let filtered = filterMeetingsByCanton(event.target.value);
addMeetingsToRepeater(filtered);
}
export function ddlWeekdayFilter_change(event) {
let filtered = filterMeetingsByWeekday(event.target.value);
addMeetingsToRepeater(filtered);
}
Can please someone have a look and try to help me fix this problem. I’m happy, to answer any further questions.