Search results change order after display - RESOLVED

Ask the community
,
1

The website is here: teensimpact . org/database
When I first load the page the search results are in the correct order. But then after about 1 second, a couple results that should be near the end of the results are moved to the top. The sort order is set in the dataset to be by Organization Name and then by the Role.

I noticed that if I just type a blank space in the search box, the order fixes itself.

I also noticed that even if the dataset is limited to return only 10 items, the page originally displays much more items. After clicking on the next and previous pagination buttons, this problem goes away.

I’m including the full code I use to modify the results of the page below. If I delete all this code, then the page displays in the correct order.

import wixData from "wix-data";
wixData.query("Database")
  .find()
  .then((results) => {
 let items = results.items;
    $w("#listRepeater").data = items;
    $w("#listRepeater").onItemReady(($item, itemData, index) => {
 let upperLabel = "";
 if (itemData.interaction && itemData.ageMinimum) {
        upperLabel = itemData.interaction + "\nAge Min: " + itemData.ageMinimum;
      } else if (itemData.interaction) {
        upperLabel = itemData.interaction;
      } else if (itemData.ageMinimum) {
        upperLabel = "Age Min: " + itemData.ageMinimum;
      }
      $item("#upperLabel").text = upperLabel;
 let fullDescription = "";
 if (itemData.mission && itemData.roleDescription) {
        fullDescription = "Mission: " + itemData.mission +
 "\n\nRole Description: " + itemData.roleDescription;
      } else if (itemData.mission) {
        fullDescription = itemData.mission;
      } else if (itemData.roleDescription) {
        fullDescription = "Role Description: " + itemData.roleDescription;
      }
      $item("#fullDescription").text = fullDescription;
    })
  });

let lastFilterTitle;
let debounceTimer;
export function iSearch_keyPress(event, $w) {
 if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iSearch').value);
  }, 500);
}

function filter(title) {
 if (lastFilterTitle !== title) {
 let orgFilter = wixData.filter();
 let roleFilter = wixData.filter();
 let missionFilter = wixData.filter();
 let roleDescriptionFilter = wixData.filter();
 let tagFilter = wixData.filter();
 let locationFilter = wixData.filter();
 let interactionFilter = wixData.filter();
 if (title) {
      orgFilter = orgFilter.contains('organizationName', title);
      roleFilter = roleFilter.contains('volunteerRole', title);
      missionFilter = missionFilter.contains('mission', title);
      roleDescriptionFilter = roleDescriptionFilter.contains('roleDescription', title);
      tagFilter = tagFilter.contains('tag', title);
      locationFilter = locationFilter.contains('location', title);
      interactionFilter = interactionFilter.contains('interaction', title);
      $w('#dataset1').setFilter(orgFilter.or(roleFilter).or(missionFilter).or(roleDescriptionFilter).or(tagFilter).or(locationFilter).or(interactionFilter));
      lastFilterTitle = title;
    }
  }
}

I’m new to Wix / Corvid so I’d really appreciate any help on this!

2

There were 2 separate problems in my code.

  1. I didn’t realize when I did a wix query, that it would override the settings in the dataset connector. So the results were being displayed in the wrong order because I needed to set the order in the code

  2. I believe the flickering problem where the data was changing after the page was rendered the page was rendering before the wix-data query had completed. I added return before wixData.query(“Database”) and I think that fixed the issue

return wixData.query( “Database” )

3

Well done!
If your issue is now resolved, please mark it as RESOLVED in your POST-TITLE.