debounce timer issue, please help

Ask the community
, ,
1

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);
}
}
});
}

2

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…

3

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 “לא נמצאו מוצרים :smirk:” 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!

4

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.

5

Thought the debounce timer function essentially would help the flickering and my last comment - I’m helpless.