Repeater Items Show Before Sort Complete?

Ask the community
,
1

I have a repeater that is populated with database items. I want the user to be able to select different categories, then click search button. It works fine BUT, the initial database items show briefly BEFORE the filter and sort has completed.

What kind of delay do I need?
site: https://tracesofgold.com
click on songlist, then search songlist…

Here is the code:

import wixData from ‘wix-data’;
import {sendEmail, sendEmailWithRecipient} from ‘backend/email’;

let Filter;
let songReq=‘Test Title’;
$w.onReady( function () {
$w(‘#repeater1’).hide();
$w(“#repeater1”).onItemReady( ($w, itemData, index) => {
$w(“#songTitle”).text = itemData.songTitle;
$w(“#artist”).text = itemData.artist;
$w(“#year”).text = itemData.year;
songReq=itemData.songTitle;
$w(‘#reqMsg’).hide();
} );

});

export function searchButton_click(event) {
let valueGenre = $w(‘#category’).value;
if ( valueGenre === “All By Title”) {
listByTitle();
}
else if ( valueGenre === “All By Artist”) {
listByArtist();
}
else {
Filter = $w(‘#category’).value;
runFilter();
}
}

function runFilter () {
$w(‘#reqMsg’).hide();
$w(‘#dataset1’).setFilter(
wixData.filter()
.contains(‘genre’, $w(‘#category’).value)
)
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“songTitle”)
);
$w(‘#reqMsg’).hide();
$w(‘#repeater1’).show();
$w(‘#reqMsg’).hide();

}

function listByTitle () {
$w(‘#reqMsg’).hide();
Filter = $w(‘#category’).value;
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“songTitle”)
);
$w(‘#reqMsg’).hide();

$w(‘#repeater1’).show();
$w(‘#reqMsg’).hide();
}

function listByArtist () {
$w(‘#reqMsg’).hide();
Filter = $w(‘#category’).value;
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“artist”)
);
$w(‘#repeater1’).show();
$w(‘#reqMsg’).hide();
}

export function requestButton_click(event, $w) {
$w(“#requestButton”).hide();
songReq = $w(“#songTitle”).text;

const subject = Song Request ${$w("#songTitle").text};
const body = Thank You;
const recipient = ‘3868374126@vtext.com’;

//sendEmailWithRecipient(subject, body, recipient)
// .then(response => console.log(response));

sendEmail(subject, body)
.then(response => console.log(response));

$w(“#reqMsg”).show();
}

Also, as you can see the Request Button sends and email, which also works just fine. However, the Hide $w(“#reqMsg”).hide(); DOES NOT HIDE on Live Site. It works perfectly in Preview Mode? I have synced Live DB to Sandbox, cleared cache and cookies and the issue persists! When you click on Search Button and the page displays, you see the “reqMsg” as well as the button. After message has been sent I want to Hide the button and Show the message.

Please help.

Thanks
JD

2

PROBLEMS SOLVED…

I simply set the database setting on the page to All By Title, then made first selection same.

Hide/Show never did work, just got around the issue by initially setting the #reqMsg value to " ", then when email was sent did HIDE on the button and set text to “Your Request Has Been Sent”.

Go Figure!!!

3

Orig Problem of repeater items showing before the sort complete persists. I guess I still DO NEED some sort of delay before the $w(‘#repeater1’).show();

4

This seems to have worked…

// put preLoad in OnREADY section

preLoad();

function preLoad()
{
setTimeout(() => {

console.log("WAITING FOR FILTER TO PROCESS..");

}, 3000);
}

5

Glad you figured it out. Javascript is an asynchronous scripting language so changing the order of events can make all the difference.

6

FYI - Another better approach is to add a filter that will never match in the Database settings. The repeater will always fill based on that even before you use a filter in wix code.