Want to display "No Results Found" on a repeater when filtered and no results come up - can't figure out why this simple code doesn't work

Ask the community
,
1

Hello everybody! Hope you’re having a fabulous day.
I am not - because a simple code has been bugging me for a while now.

I have a repeater (#repeater4) that is filtered through multiple filtering options (dropdowns and selection tags). This works great. The problem is the following:
I want to display a message when the search shows no results. I have a text field ( #noResults).
The property value of this text field is hidden on load, since I want it to be visible only when the filtering search gives no results.

Example: you select options from my dropdown menus, click search but end up with no results, thus the “noResults” text field pops up.
I have triple checked everything, including names, code etc. I am getting no errors in the console. Problem is, the message just does not show up :frowning: It stays hidden when no results are found.

I could really use assistance and kindly ask you, dear reader, to help me. I’ve read all of the similar posts on this forum and tried every code posted to no avail. So here is my code - I highlighted the lines of code relevant to this post and pasted the whole code in case I’ve misplaced certain lines of code regarding this. Please help!!! I beg of you.

Thank you so much

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

//start of JobField dropdown - work please i beg of

$w . onReady (() => {

errorTextResult ();

$w ( “#dataset1” ). onReady (() => {

$w ( “#repeater4” ). onItemReady (( $item , itemData , index ) => {
$item ( ‘#viewButton’ ). onClick (() => {
wixWindow . openLightbox ( ‘Cheese’ , itemData )
});
});

});

$w ( ‘#clearButton’ ). onClick (() => {
$w ( “#countryDropdown” ). value = undefined
//$w(“#companyType”).value = undefined
$w ( “#employment” ). value = undefined
$w ( “#companySize” ). value = undefined
$w ( “#checkboxGroup1” ). value = undefined
$w ( “#benefits” ). value = undefined
//$w(“#approved”).value = undefined
$w ( “#dataset1” ). setFilter ( wixData . filter ()
. eq ( ‘field’ , location ))

});

});

export function searchButton_click ( event ) {
search ();
}

function search () {
let selectedTags = $w ( “#benefits” ). value ;
wixData . query ( “jobpostings” )
. contains ( “field” , String ( $w ( “#countryDropdown” ). value ))
// .and(wixData.query(“jobpostings”).contains(“location”, String($w(“#companyType”).value)))
. and ( wixData . query ( “jobpostings” ). contains ( “type” , String ( $w ( “#employment” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “remote” , String ( $w ( “#checkboxGroup1” ). value )))
. and ( wixData . query ( “jobpostings” ). contains ( “companyType” , String ( $w ( “#companySize” ). value )))
. and ( wixData . query ( “jobpostings” ). hasAll ( “benefits2” , selectedTags ))
// .and(wixData.query(“jobpostings”).contains(“partners”, String($w(“#approved”).value)))

. find ()
. then ( results => {
$w ( “#repeater4” ). data = results . items ;
});
}

export function input1_keyPress ( event ) {
let SearchValue = $w ( “#input1” ). value ;
$w ( “#dataset1” ). setFilter ( wixData . filter (). contains ( ‘title’ , SearchValue )
. or ( wixData . filter (). contains ( ‘location’ , SearchValue ))
. or ( wixData . filter (). contains ( ‘field’ , SearchValue ))
. or ( wixData . filter (). contains ( ‘type’ , SearchValue ))
. or ( wixData . filter (). contains ( ‘organization’ , SearchValue )));

}

function errorTextResult () {
$w ( ‘#dataset1’ ). onReady ( () => {
let count = $w ( ‘#dataset1’ ). getTotalCount ();

**if**  ( count  >  0 ) { 
    $w ( '#noResults' ). hide (); 
} 

**if**  ( count  ===  0 ) { 
    $w ( '#noResults' ). show (); 
}

});
}

2

Hi there :wave:t2: It looks to me like your function errorTextResult is currently running before you run the query, which makes sense why it might not be working. You want the query to happen first and then the “noResults” element to show or hide based on that, correct?
Try getting rid of the errorTextResult function, and using an if-else statement as part of the query results in a structure more like the code below. I haven’t tested this specific code but I use a similar structure on pages of my site and it works well.
Good luck!

wixData.query("jobpostings")
            .contains("field",String($w("#countryDropdown").value))
            .and(wixData.query("jobpostings")
            // etc, all your others
            .find()
            .then(results => {
                if (results.items.length > 0) {  
// if there are results, hide the element and fill the repeater
                    $w('#noResults').hide();
                    $w("#repeater4").data = results.items;
                    console.log("Yes results");
                } else {
// if there are no results, hide the element (and fill the empty repeater?) 
                    $w('#noResults').show();
                    $w("#repeater4").data = results.items;
                    console.log("No results");
                }
            })
3

Oh my god! Bless your heart, it works! Since I also have a “clear search” button and an input text value (search box) I just added " $w ( ‘#noResults’ ). hide ();" to those lists of functions relating to those buttons/fields and it resets the visibility as well. Double yay!!

Thank you so much! You have no idea how much you’ve helped me atm, I really spent a tonne of nerves on this today. Thank you!

4

@dlakadorijan No problem! Glad you got it figured out