Dataset filter is delayed. What to do?!

Ask the community
,
1

I have a dataset #dataset1. I have a few filters which are applied by different buttons. It all seems to work fine with the EXCEPTION of the fact that the filter applies after the #repeater1 is displaying the content. That means that it takes about 5 seconds before the repeater is updated with the new filter. I have seen this discussed prevously but I cant seem to find an answer that works…

Here is my code

import wixData from ‘wix-data’ ;

$w.onReady( function () {
$w( ‘#headertransition’ ).onViewportLeave(()=> {
$w( ‘#scrollingheader’ ).show();
$w( ‘#defaultheader’ ).hide();
})
$w( ‘#headertransition’ ).onViewportEnter(()=> {
$w( ‘#scrollingheader’ ).hide();
$w( ‘#defaultheader’ ).show();
})
});

export function brostknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “bröst” ));
$w( ‘#brostbo’ ).show();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#kroppknapp’ ).hide();
$w( ‘#ansikteknapp’ ).hide();
$w( ‘#rekonknapp’ ).hide();
$w( ‘#injektionknapp’ ).hide();
$w( ‘#repeater1’ ).show();
}

export function aterstallknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter());
$w( ‘#repeater1’ ).hide();
$w( ‘#kroppknapp’ ).show();
$w( ‘#ansikteknapp’ ).show();
$w( ‘#rekonknapp’ ).show();
$w( ‘#injektionknapp’ ).show();
$w( ‘#brostbo’ ).hide();
$w( ‘#text169’ ).hide();
$w( ‘#aterstallknapp’ ).hide();
$w( ‘#brostknapp’ ).show();
$w( ‘#kroppbox’ ).hide();
$w( ‘#ansiktebox’ ).hide();
$w( ‘#rekonbox’ ).hide();
$w( ‘#injektionbox’ ).hide();
}

export function kroppknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “kropp” ));
$w( ‘#brostknapp’ ).hide();
$w( ‘#ansikteknapp’ ).hide();
$w( ‘#rekonknapp’ ).hide();
$w( ‘#injektionknapp’ ).hide();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#kroppbox’ ).show();
$w( ‘#repeater1’ ).show();
}

export function ansikteknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “ansikte” ));
$w( ‘#brostknapp’ ).hide();
$w( ‘#kroppknapp’ ).hide();
$w( ‘#rekonknapp’ ).hide();
$w( ‘#injektionknapp’ ).hide();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#ansiktebox’ ).show();
$w( ‘#repeater1’ ).show();
}

export function rekonknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “rekonstruktiv” ));
$w( ‘#brostknapp’ ).hide();
$w( ‘#ansikteknapp’ ).hide();
$w( ‘#kroppknapp’ ).hide();
$w( ‘#injektionknapp’ ).hide();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#rekonbox’ ).show();
$w( ‘#repeater1’ ).show();
}

export function injektionknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “injektion” ));
$w( ‘#brostknapp’ ).hide();
$w( ‘#ansikteknapp’ ).hide();
$w( ‘#rekonknapp’ ).hide();
$w( ‘#kroppknapp’ ).hide();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#injektionbox’ ).show();
$w( ‘#repeater1’ ).show();

}

Anyone with a clue of what to do? Please bare in mind that I am NOT a coding expert so please be patient with me and if possible give a step by step code answer…:blush:

2

The only Thing i could find is the missing…

$w('#dataset1').onReady(()=>{ })

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#dataset1').onReady(()=>{
 let filter =  wixData.filter()

        $w('#headertransition').onViewportLeave(()=> {
            $w('#scrollingheader').show();
            $w('#defaultheader').hide();
        })
        $w('#headertransition').onViewportEnter(()=> {
            $w('#scrollingheader').hide();
            $w('#defaultheader').show();
        })
        $w('#brostknapp').onClick(()=>{
            close_AllElements()
            $w('#dataset1').setFilter(filter).contains("tag", "bröst");
            $w('#brostbo').show();
            $w('#text169').show();
            $w('#aterstallknapp').show();    
            $w('#repeater1').show();
        });
        $w('#aterstallknapp').onClick(()=>{
            close_AllElements()
            $w('#dataset1').setFilter(wixData.filter());
            $w('#repeater1').hide();
            $w('#kroppknapp').show();
            $w('#ansikteknapp').show();
            $w('#rekonknapp').show();
            $w('#injektionknapp').show();
        });
        $w('#kroppknapp').onClick(()=>{
            close_AllElements()
            $w('#dataset1').setFilter(filter).contains("tag", "kropp");
            $w('#text169').show();
            $w('#aterstallknapp').show();
            $w('#kroppbox').show(); 
            $w('#repeater1').show();
        });
        $w('#ansikteknapp').onClick(()=>{
            close_AllElements()
            $w('#dataset1').setFilter(filter).contains("tag", "ansikte");
            $w('#text169').show();
            $w('#aterstallknapp').show();
            $w('#ansiktebox').show();
            $w('#repeater1').show();
        });
        $w('#rekonknapp').onClick(()=>{
            close_AllElements()
            $w('#dataset1').setFilter(filter).contains("tag", "rekonstruktiv");
            $w('#text169').show();
            $w('#aterstallknapp').show();
            $w('#rekonbox').show();
            $w('#repeater1').show();
        });
        $w('#injektionknapp').onClick(()=>{
            close_AllElements()
            $w('#dataset1').setFilter(filter).contains("tag", "injektion")
            $w('#text169').show();
            $w('#aterstallknapp').show();
            $w('#injektionbox').show();
            $w('#repeater1').show();
        });
    })
});

function close_AllElements() {
    $w('#ansikteknapp').hide();
    $w('#brostknapp').hide();
    $w('#aterstallknapp').hide();
    $w('#brostbo').hide();
    $w('#injektionknapp').hide();
    $w('#kroppknapp').hide();
    $w('#kroppbox').hide();
    $w('#rekonknapp').hide();
    $w('#text169').hide();
    $w('#brostknapp').show();
    $w('#ansiktebox').hide();
    $w('#rekonbox').hide();
    $w('#injektionbox').hide();
}
3

I did the changes as suggested but now my repeater does show up at ALL. Is there a mistake in the code?? I pretty much just copied the code you wrote… Can you help me? Any help would be much appreciated!!!

here is the code as it says right now:

import wixData from ‘wix-data’ ;

$w.onReady( function () {
$w( ‘#dataset1’ ).onReady(()=>{
let filter = wixData.filter()

    $w( '#headertransition' ).onViewportLeave(()=> { 
        $w( '#scrollingheader' ).show(); 
     $w( '#defaultheader' ).hide(); 
}) 
$w( '#headertransition' ).onViewportEnter(()=> { 
    $w( '#scrollingheader' ).hide(); 
    $w( '#defaultheader' ).show();

})

export function brostknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “bröst” ));
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#brostbo’ ).show();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#kroppknapp’ ).hide();
$w( ‘#ansikteknapp’ ).hide();
$w( ‘#rekonknapp’ ).hide();
$w( ‘#injektionknapp’ ).hide();
$w( ‘#repeater1’ ).show();
}

export function aterstallknapp_click(event) {
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#dataset1’ ).setFilter(wixData.filter());
$w( ‘#repeater1’ ).hide();
$w( ‘#kroppknapp’ ).show();
$w( ‘#ansikteknapp’ ).show();
$w( ‘#rekonknapp’ ).show();
$w( ‘#injektionknapp’ ).show();
$w( ‘#brostbo’ ).hide();
$w( ‘#text169’ ).hide();
$w( ‘#aterstallknapp’ ).hide();
$w( ‘#brostknapp’ ).show();
$w( ‘#kroppbox’ ).hide();
$w( ‘#ansiktebox’ ).hide();
$w( ‘#rekonbox’ ).hide();
$w( ‘#injektionbox’ ).hide();
}

export function kroppknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “kropp” ));
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#brostknapp’ ).hide();
$w( ‘#ansikteknapp’ ).hide();
$w( ‘#rekonknapp’ ).hide();
$w( ‘#injektionknapp’ ).hide();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#kroppbox’ ).show();
$w( ‘#repeater1’ ).show();
}

export function ansikteknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “ansikte” ));
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#brostknapp’ ).hide();
$w( ‘#kroppknapp’ ).hide();
$w( ‘#rekonknapp’ ).hide();
$w( ‘#injektionknapp’ ).hide();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#ansiktebox’ ).show();
$w( ‘#repeater1’ ).show();
}

export function rekonknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “rekonstruktiv” ));
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#brostknapp’ ).hide();
$w( ‘#ansikteknapp’ ).hide();
$w( ‘#kroppknapp’ ).hide();
$w( ‘#injektionknapp’ ).hide();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#rekonbox’ ).show();
$w( ‘#repeater1’ ).show();
}

export function injektionknapp_click(event) {
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “tag” , “injektion” ));
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#brostknapp’ ).hide();
$w( ‘#ansikteknapp’ ).hide();
$w( ‘#rekonknapp’ ).hide();
$w( ‘#kroppknapp’ ).hide();
$w( ‘#text169’ ).show();
$w( ‘#aterstallknapp’ ).show();
$w( ‘#injektionbox’ ).show();
$w( ‘#repeater1’ ).show();
}

export function varta_click(event) {
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#repeater1’ ).hide();
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “gruppering” , “vårta” ));
$w( ‘#repeater1’ ).show();

}

export function brostforstoring_click(event) {
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#repeater1’ ).hide();
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “gruppering” , “bröstförstoring” ));
$w( ‘#repeater1’ ).show();

}

export function brostlyft_click(event) {
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#repeater1’ ).hide();
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “gruppering” , “bröstlyft” ));
$w( ‘#repeater1’ ).show();

}

export function brostforminskning_click(event) {
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#repeater1’ ).hide();
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “gruppering” , “bröstförminskning” ));
$w( ‘#repeater1’ ).show();

}

export function gynekomasti_click(event) {
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#repeater1’ ).hide();
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “gruppering” , “gynekomasti” ));
$w( ‘#repeater1’ ).show();

}

export function trans_click(event) {
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#repeater1’ ).hide();
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “gruppering” , “trans” ));
$w( ‘#repeater1’ ).show();
}

export function protes_click(event) {
$w( ‘#repeater1’ ).scrollTo( 0 , 0 );
$w( ‘#repeater1’ ).hide();
$w( ‘#dataset1’ ).setFilter(wixData.filter().contains( “gruppering” , “implantat” ));
$w( ‘#repeater1’ ).show();

}
});

4

The dataset’s setFilter() function returns a Promise. Therefore, you should only show() your Repeater after the Promise is resolved. Something like this:

$w(#dataset1').setFilter( wixData.filter()
  .contains("gruppering", "implantat")
)
.then( () => {
  console.log("Dataset is now filtered");
  $w('#repeater1').show();
} )
.catch( (err) => {
  console.log(err);
} );

Note: To improve peformance, it is best not to display too many Repeater items at one time. You can page the results to make the display faster.