Hello there,
I am struggling to hide an element having when the total count of my query result is equal to or greater than 1. It's essentially a text element that says "No search results" - very important for user to understand that the query has no results rather than starring at a blank page.
Yuval / Tal, my website is siksekcentre.com, would be great help to let me know how I could hide that element and stop the flickering on that table! My code:
import wixUsers from 'wix-users';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
$w.onReady(function () {
//TODO: import wixData from 'wix-data';
});
let debounceTimer;
export function searchButton_click_1() {
wixData.query('Search')
.contains('title', $w('#textInput1').value)
.find()
.then(res => {
$w('#resultsTable').rows = res.items;
$w('#resultsTable').show();
$w('#banner1').show();
$w("#searchButton").hide();
$w("#closebutton").show();
$w("#searchtitle").show();
$w("#searchtitle").show();
if (res.totalCount === 0) {
$w("#search1").show();
$w("#banner2").show();
if (res.totalCount >= 1) {
$w("#search1").hide();
$w("#banner2").hide();
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
debounceTimer = setTimeout(() => {
($w('#textInput1').value);
}, 500);
}
}
}
});
}
export function textInput1_click() {
$w("#searchButton").show();
$w("#closebutton").hide();
$w('#banner1').hide();
$w("#resultsTable").hide();
$w("#searchtitle").hide();
}
export function closebutton_click() {
$w("#searchButton").show();
$w("#closebutton").hide();
$w("#resultsTable").hide();
$w('#banner1').hide();
$w("#searchtitle").hide();
$w("#search1").hide();
$w("#banner2").hide();
}
$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginButton1").hide();
$w("#profileButton").show();
$w("#image26").show();
}
else {
$w("#loginButton1").text = "הכנס | הרשם";
$w("#loginButton1").show();
$w("#profileButton").hide();
$w("#image26").hide();
}
});
export function loginButton1_click() {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginButton1").text = "הכנס | הרשם";
$w("#loginButton1").show();
});
}
// user is logged out
else {
let userId;
let userEmail;
// prompt the user to log in
wixUsers.promptLogin( {"mode": "login"} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query("Members")
.eq("_id", userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
"_id": userId,
"email": userEmail
};
// add the item to the collection
wixData.insert("Members", toInsert)
.catch( (err) => {
console.log(err);
} );
}
// update buttons accordingly
$w("#loginButton1").text = "התנתק";
$w("#loginButton1").hide();
$w("#profileButton").show();
$w("#image26").show();
} )
.catch( (err) => {
console.log(err);
} );
wixLocation.href = wixLocation;
}
}
export function profileButton_click() {
wixLocation.to(`/Members/AccountSettings/${wixUsers.currentUser.id}`);
}
export function firstName2_click() {
wixLocation.to(`/Members/AccountSettings/${wixUsers.currentUser.id}`);
}
export function ImageMob_click() {
wixLocation.to(`/Members/AccountSettings/${wixUsers.currentUser.id}`);
}
$w.onReady( () => {
$w.onReady( () => {
$w("#dataset1").onReady( () => {
$w("#dataset1").refresh()
.then( () => {
console.log("Done refreshing the dataset");
} );
} );
} );
if(wixUsers.currentUser.loggedIn) {
const d = new Date();
const h = d.getHours();
var label;
if (h < 11 && h > 5) {
label = "בוקר טוב,";
} else if (h < 18 && h >= 11) {
label = "ערב טוב,";
} else {
label = "לילה טוב,";
}
$w("#greeting").text = label;
}
});
export function subsbutton_click() {
//Add your code for this event here:
$w("#text49").hide();
}
export function LogoutButton_click() {
// user is logged in
if(wixUsers.currentUser.loggedIn) {
// log the user out
wixUsers.logout()
.then( () => {
// update buttons accordingly
$w("#loginButton1").text = "הכנס | הרשם";
});
}
}
export function textInput1_change() {
wixData.query('Search')
.contains('title', $w('#textInput1').value)
.find()
.then(res => {
$w('#resultsTable').rows = res.items;
$w('#resultsTable').show();
$w('#banner1').show();
$w("#searchButton").hide();
$w("#closebutton").show();
$w("#searchtitle").show();
$w("#searchtitle").show();
if (res.totalCount === 0) {
$w("#search1").show();
$w("#banner2").show();
}
else if (res.totalCount >= 1) {
$w("#search1").hide();
$w("#banner2").hide();
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
debounceTimer = setTimeout(() => {
($w('#textInput1').value);
}, 500);
}
}
});
}
Thought the debounce timer function essentially would help the flickering and my last comment - I'm helpless.
Sorry not sure if that made any sense - the text above (in Hebrew) is only displayed when there are no search results (hence when .totalCount = 0), I want to hide that text element upon a keyChange while on the search input field / when .totalCount of the query made by the user is equal or above 1.
Thanks Yoav, I've removed the bold line - I'm not particularly an expert at this hence I ignored it. Can you please help me out with remove the "לא נמצאו מוצרים 😏" text that is displayed once the .totalCount equals to zero just after a key change / .totalCount >=1? I haven't changed the code above for that either and it's still failing. Thank you again for the help!
Hay,
In the debounce logic you are not really doing anything -
if (debounceTimer) { clearTimeout(debounceTimer); debounceTimer = undefined; debounceTimer = setTimeout(() => { ($w('#textInput1').value); }, 500);
You do not set or read the value, the bold line does nothing...