Selection Tags Filter doesn`t work on first click when initial loading the website

Hi there,
with help from this forum i managed to get multiple selection tags working. However when you initial load the website nothing happens after the first selection. After the second click on a tag everything works great. On the second click it doesn`t matter, if i re-select the tag or choose another one.

For example if i select one gender (Rüde or Hündin) after first loading the website nothing happens:

After i de-select my choice and re-select it, the filter works:

You can test the filter on the website: https://www.ein-freund-fuers-leben.org/hunde

This is my code:

import wixData from 'wix-data';

$w.onReady(function () 

{ $w("#GeschlechtTags, #SizeTags, #AlterTags, #AufenthaltTags").onChange(function () {
        search();
    });

    function search() {

$w('#GeschlechtTags, #SizeTags, #AlterTags, #AufenthaltTags').onChange(() => {
    let filter = wixData.filter();

    const [val1, val2, val3, val4] = [$w('#GeschlechtTags').value, $w('#SizeTags').value, $w('#AlterTags').value, $w('#AufenthaltTags').value];
    if(val1.length){filter = filter.hasSome('geschlecht', val1);}
    if(val2.length){filter = filter.hasSome('size', val2);}
    if(val3.length){filter = filter.hasSome('alter', val3);}
    if(val4.length){filter = filter.hasSome('adresse', val4);}

    $w('#HundeDataset').setFilter(filter)
                        .then(count)
})

           

        $w("#clearFilter").onClick(function () {
            $w("#GeschlechtTags, #SizeTags, #AlterTags, #AufenthaltTags").value = undefined;
            $w("#HundeDataset").setFilter(wixData.filter()).then(count);
        });

    }

    //COUNT ITEM
    function count() {
        let count = $w("#HundeDataset").getTotalCount();
        if (count > 0) {
            $w("#TrefferHunde").text = `${count} Hund(e) gefunden`;

        } else { $w("#TrefferHunde").text = `Keine Hunde gefunden`; }

        return count;
    }

    $w("#HundeDataset").onReady(function () {
        count();
    });

});

Thank you in advance.

|Your code with my comments:

import wixData from 'wix-data';

$w.onReady(function () 

//DELETE the Lines in green:
{ $w("#GeschlechtTags, #SizeTags, #AlterTags, #AufenthaltTags").onChange(function () {
        search();
    });


function search()/*leave the following parenthesis >> */ {


$w('#GeschlechtTags, #SizeTags, #AlterTags, #AufenthaltTags').onChange(() => {
    let filter = wixData.filter();

    const [val1, val2, val3, val4] = [$w('#GeschlechtTags').value, $w('#SizeTags').value, $w('#AlterTags').value, $w('#AufenthaltTags').value];
    if(val1.length){filter = filter.hasSome('geschlecht', val1);}
    if(val2.length){filter = filter.hasSome('size', val2);}
    if(val3.length){filter = filter.hasSome('alter', val3);}
    if(val4.length){filter = filter.hasSome('adresse', val4);}

    $w('#HundeDataset').setFilter(filter)
                        .then(count)
})

           

        $w("#clearFilter").onClick(function () {
            $w("#GeschlechtTags, #SizeTags, #AlterTags, #AufenthaltTags").value = undefined;
            $w("#HundeDataset").setFilter(wixData.filter()).then(count);
        });

    } // << DELETE this parenthesis

    //COUNT ITEM
    function count() {
        let count = $w("#HundeDataset").getTotalCount();
        if (count > 0) {
            $w("#TrefferHunde").text = `${count} Hund(e) gefunden`;

        } else { $w("#TrefferHunde").text = `Keine Hunde gefunden`; }

        return count;/*what are you doing with this returned count?*/
    }

    $w("#HundeDataset").onReady(function () {
        count();
    });


});

Sorry for my late reply, but thank you so much for your help. You are my hero, the code now works as intended.

To your second note:

return count;/*what are you doing with this returned count?*/

I dont know :smiley: But it works as i want it to work so i didnt change that. I am working on the rest of the website and after that i will come back to this

1 Like