(SOLVED)When "all" is selected on dropdown nothing shows up

Ask the community
,
1

Hi there,

I’ve managed to get around building the bulk of this site, but my current issue is, when the “All” option is clicked, it returns with “no results found” which is not true, because with all my other filters, it all seems to be working. It’s just that “all” option that is really irritating me. Is there a way where I can either remove the “All” option or get it to correspond with my other results?

The dropdown is linked to a dataset field which consists of tags.

Here is the page: https://carolineo95.wixsite.com/website/jobs

Here is the screenshot:

2274×626 22.7 KB

And here is my code:

Do let me know if it needs tweaking.

import wixData from 'wix-data';

let debounceTimer;

$w.onReady(() => {

    $w("#search").onKeyPress(function () {

        $w("#xitbutton").show();

        $w("#search").value;

        if (debounceTimer) {
            clearTimeout(debounceTimer);
            debounceTimer = undefined;
        }
        debounceTimer = setTimeout(() => {
            filter($w("#search").value);
        }, 200);

    })

    let searchWord;

    function filter(search) {
        if (searchWord !== search) {
            $w("#dynamicDataset").setFilter(wixData.filter().contains('title', search)
                    .or(wixData.filter().contains("location", search))
                    .and(wixData.filter().contains("arraystring", $w('#dropdown1').value)
                    //Insert more field filter here ====> here <====
                ))

                .then(countItems)
            searchWord = search

        }

    }

    //COUNT SEARCH FUNCTION 🚀
    function countItems() {
        let count = $w("#dynamicDataset").getTotalCount()
        count > 0 ? $w("#counttext").text = `${count} Jobs` : $w("#counttext").text = `No Jobs Found 😥`;

        return countItems;
    }

    //LOAD COUNT WHEN DATASET IS READY 🎉
    $w("#dynamicDataset").onReady(function () {
        countItems();
    });

    // CLEAR SEARCH CODE 🎉
    $w('#xitbutton').onClick(() => {

        $w("#search").value = undefined
        $w("#dynamicDataset").setFilter(wixData.filter()).then(countItems())

        $w("#xitbutton").hide();

    })
})

export function dropdown1_change(event, $w) {
    $w("#dynamicDataset").setFilter(wixData.filter()
        .contains("arraystring", $w('#dropdown1').value)
    
    ).then((results) => {
 let count = $w("#dynamicDataset").getTotalCount();
 if(count === 0){
            $w("#counttext").text = `No Jobs Found 😥`;
        }
 if (count >= 1) {
             $w("#counttext").text = `${count} Jobs`;

        }

    })
    }

Thanks in advance :slight_smile:

2

Hello! I don’t see any code that handles the scenario where “All” is selected. Am I missing something?

3

Hey Amanda! No, you’re not missing anything, I didn’t think to add any code re. when “all” is selected… It’s not named in the database. Any ideas on the code I should write when “all” is selected and nothing is typed?

Thanks for looking at this btw :slight_smile:

4

So, I think in your dropdown change event you need an option for if the dropdown value is “All”

All will not exist in the db, it’s just the text on the button.

In the if statement, you can provide what you want to happen in the case of “All” which would be to clear the filters

From the docs:
“To clear a dataset’s current filter, call setFilter() and pass it an empty filter. You create an empty filter by calling the filter() function without chaining any of the additional filter functions mentioned above.”

Check it out here and let me know how it goes https://www.wix.com/velo/reference/wix-dataset/dynamicdataset/setfilter

5

Hi Amanda, I’ve shuffled the additional code around, and I’m still not getting results. Any ideas?


export function dropdown1_change(event, $w) {
    if ($w('#dropdown1').value === "All"){
         $w('#dynamicDataset').setFilter(wixData.filter());
   }else {
    $w("#dynamicDataset").setFilter(wixData.filter()
        .contains("arraystring", $w('#dropdown1').value)
    
    ).then((results) => {
         
 let count = $w("#dynamicDataset").getTotalCount();
 if(count === 0){
            $w("#counttext").text = `No Jobs Found 😥`;
        }
 if (count >= 1) {
             $w("#counttext").text = `${count} Jobs`;

        }

    })
    }}
6

Also, FYI, I’ve linked my dropdown to a dataset field that uses tags. The more I have researched, I’ve realised that this is v relevant info lol

7

I"m wondering if this isn’t a code problem at all. Are there any settings in that button that you have configured to connect to the dataset? I"m wondering if there is some clash between the code you have written and any no-code settings in the element config?

Before you started adding any code at all, what was happening?

8

I’m beginning to think the issue is the dropdown being linked to the dataset. I was literally pulling my hair out over the weekend re-arranging, adding, removing code, watching youtube vids, and couldn’t find a solution. I’m thinking my final solution would have to be manually linking the dropdown items to the repeater with the code, and getting that to correspond with the search bar. It’s going to be gruelling and time-consuming but it’s the most logical way.

9

I think it is the code, when I remove it, the dropdown filters normally, but there is no “counttext” obviously, so ideally I’d use both to filter results. I was going to start from scratch, but I’ve come this far. I’m really stuck :frowning:

10

I checked the link you provided but it’s returning 404. If you provide the site link, I"ll take a look this week sometime

11

Hi Amanda,

Thanks for your help on all of this, I managed to find a solution and I’m going to post it as a comment. So no need to look into it any further :slight_smile:

12

Just for anyone who is interested in the solution:

After a bunch of tweaking, research, youtube and screaming (lol), I found a solution.

I figured I had to manually add the dropdown items rather than link it to the dataset. In that regard, I named the dropdown items and their values were identical to the tags which I created in the dataset, and followed it up with this code.

It turns out that if you link your dataset with a field identity of tags (arraystring) any results will automatically have an “All” result if you link it to your collection and filter content and not collect content.

import wixData from 'wix-data';

$w.onReady(function () {
 $w("#dynamicDataset")
wixData.query("Jobs2")
  .count()
  .then((num) => {
    $w("#counttext").text = `${num} jobs found`;
        $w("#exitbutton").hide();
        });
})

export function search_keyPress(event) {
if (event.key === "Enter") {
    $w('#exitbutton').show();
    search();
}
}

export function dropdown1_change(event) {
    $w('#exitbutton').show();
  search();  
}

function search() {
$w('#exitbutton').show();
 $w("#dynamicDataset").onReady(function () {
    wixData.query("Jobs2")
        .contains("arraystring", String($w("#dropdown1").value))
        .and(wixData.query("Jobs2").contains("title", String($w("#search").value)))

        .find()
        
        .then(results => {
            $w("#repeater1").data = results.items;
            
results.query.count()
  .then((num) => {
    let numberOfItems = num;
    if(num > 0){
    $w("#counttext").text = `${num} jobs found`;
    }else{$w("#counttext").text = `No jobs found`;
    }
    return num;
    })
        });



})
}
export function exitbutton_click(event) {
    $w('#dynamicDataset').setFilter(wixData.filter());
  $w("#dynamicDataset")
wixData.query("Jobs2")
  .count()
  .then((num) => {
    $w("#counttext").text = `${num} jobs found`;
    $w('#dropdown1').value = undefined;
    $w('#search').value = undefined;
})
}

With this code, I was able to link my search box and dropbox values to my repeater AND have the total count show up above the repeater. Just leaving this here, for anyone else who finds themselves in this or a similar situation.

Useful resources are: count() and the filter() info on wix api.
These vids also came in super handy: Use Dropdown Filters in Wix with Velo | Wix Fix - YouTube
Simple Multiple Filter using Velo by WIX | STEP-BY-STEP | Wix Ideas - YouTube