Search code examples
datasetvelo

WiX - Dataset Mismatch

I have a website for my Theatre Institute and on the homepage, I have a Slideshow with Two Repeaters on two different slides connected to two different datasets. I use them to display event information/status from my database collection.

Slide1: recentRepeater <-- recentDataset <-- myCollection (For Recent Events)

Slide2: upcomingRepeater <-- upcomingDataset <-- myCollection (For Upcoming Events)

The Problem

While loading, the dataset2 data is shown in repeater1 i.e. RECENT EVENTS gets displayed in the UPCOMING EVENTS section and it gets corrected after fully loading. Being the first thing to be shown on the site, I do not want it to get messed up. This is a negative impact on my website

How It Works

I have stored dates of the Event in the database as a number in YYYYMMDD format. For example:

20-April-2019 ---> 20190420

I have properly connected the datasets to the repeater elements, set the dataset result limit to 2

I sorted the results to be produced based on the YYYYMMDD number

  • Ascending for upcomingDataset
  • Descending for recentDataset

I generate the YYYYMMDD format number for that day and filtered the results produced by the dataset by the .setFilter() function

$w("#recentDataset").setFilter(wixData.filter()
    .lt("dateNumber", YYYYMMDD_today)
)

$w("#upcomingDataset").setFilter(wixData.filter()
    .ge("dateNumber", YYYYMMDD_today)
)

How can I prevent this from happening..?

Thanks in Advance

Solution

  • It's hard to say what's going on without actually playing with your site. I think both of your datasets are connected to the same collection. I would guess the problem is that the dataset is only being filtered after the page is loaded. You can verify this by turning the console to verbose mode in preview.

    If that is indeed the problem, I can think of three possible fixes/workarounds:

    1. Set the filter's in the dataset settings instead of setting them programmatically. (This is the easiest option.)
    2. Hide the repeaters until the filters are set. (This is a bit of a hack.)
    3. Store the promises returned by the setFilter functions and return them using Promise.all() from the onReady(). (This is the fanciest option. I think it will work, but if you don't need to set the filters programmatically, you might as well do option 1 instead.)