How to postpone the dataset filtering by dropdown list , filtering the dataset by click on "Search" button

cora-kwok · August 9, 2022, 8:58am

Page setup
dataset1: display country
dataset2: filter by dataset1, selected country, show the certificate name.
dataset3: link to a new dataset to save the value inputted on the screen.
dropdown1: link to dataset1 to display the country value
dropdown1: link to dataset3 to save the search criteria.
repeater1: display the filtered result of dataset2.
button1: Submit button, link to dataset3 submit action
button2: Search button, click on the search button, and then repeater started to filter

If I set the coding for button 1 click action:
I would get the error , fail to filter the value for submitted action.

I changed to button2 click action,.
the search button do not have any response.

Here is my coding:
import wixData from “wix-data” ;

$w . onReady (() => {
// loadCountrys();
});
let lastFilterCountry ;
let debounceTimer ;

export async function button2_click ( event , $w ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
$w ( ‘#dataset1’ ). setFilter ( wixData . filter (). contains ( “country” , $w ( ‘#dropdown1’ ). value ))
. then (()=>{
console . log ( “Dataset is now filtered” );
})
. catch (( err )=>{
console . log ( err );
$w ( ‘#repeater1’ ). expand ();
})
}

export async function dropdown1_change ( event , $w ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
if ( debounceTimer ) {
clearTimeout ( debounceTimer );
debounceTimer = undefined ;
}
debounceTimer = setTimeout (() => {
console . log ( $w ( ‘#dropdown1’ ). value );
wixData . filter ( $w ( ‘#dropdown1’ ). value ) }, 500 );
}

cora-kwok · August 9, 2022, 10:39am

The debounceTimer is not working.
After I removed the filter at the dataset1 which is filter the selected country by dataset2, the repeater change values only when I click on the search button.

I could get my expected result.
No matter how the dropdown list change,
the repeater would update data, only when I clicked on the button.

CODE-NINJA · August 9, 2022, 1:03pm

import wixData from "wix-data";

//let lastFilterCountry;
let debounceTimer;

let DATASET = "dataset1";
let dbField = "?????????????????";


$w.onReady(() => {console.log("Page ready...");
 // loadCountrys();
    $w('#dataset1').onReady(()=>{console.log("Dataset ready...");
        $w('#button2').onClick(async()=>{
            $w('#'+DATASET).setFilter(wixData.filter().contains("country", $w('#dropdown1').value))
            .then(()=>{
                console.log("Dataset is now filtered");
            })
            .catch((err)=>{console.log(err);
                $w('#repeater1').expand();
            });
        });


        $w('#dropdown1').onChange(async()=>{
            if (debounceTimer) {
                clearTimeout(debounceTimer);
                debounceTimer = undefined;
            }

            debounceTimer = setTimeout(() => {
            let value = $w('#dropdown1').value               

                let myFilter = wixData.filter()
                    .startsWith(dbField, value)
                    .ge("age", "21")
                                    
                $w("#"+DATASET).setFilter(myFilter)
                .then(() => {console.log("Dataset is now filtered")})
                .catch((err)=> {console.log(err);});              
            }, 500);
        });

    });
});

To refresh a DATASET after done changes on it…

cora-kwok · August 10, 2022, 7:42am

what does it means ?
let myFilter = wixData . filter (). startsWith ( dbField , value ). ge ( “age” , “21” )

If the column for dataset1 is country, region.
Then I should set dbField =“region”
e.g. Country : Japan
Region : Asia

Than the coding change to
let dbField=region
let myFilter = wixData . filter (). startsWith ( dbField , value ). ge ( “region” , “Asia” )

CODE-NINJA · August 10, 2022, 10:50am

Replace Questionmarks with the field of your DATABASE, which you want to be used.

Here you define your used DATASET…

let DATASET="dataset1";

Here you define your used database-field inside DB.

let  dbField = "?????????????????";

let  dbField = "country";

I showed you 2 different ways of how to define your filter.
Take a closer look on the 2 different methods.

Version-1: direct option-defenition + setting filter.

$w('#button2').onClick(async()=>{
	$w('#'+DATASET).setFilter(wixData.filter()
	.contains(dbField,$w('#dropdown1').value))
	.then(()=>{console.log("Dataset filtered");})
	.catch((err)=>{$w('#repeater1').expand();});
});

Version-2: Indirect-version… (yellow marked = just example)!

$w('#dropdown1').onChange(async()=>{	
	let value=$w('#dropdown1').value; 
	let myFilter=wixData.filter()
	.startsWith(dbField,value)
	.ge("age","21")
	$w("#"+DATASET).setFilter(myFilter)
	.then(()=>{console.log("Dataset is now filtered")})
	.catch((err)=>{console.log(err);});
});

What does happen here?
0) After you have changed dropdown-value…

You get the VALUE of your DROPDOWN first.
You generate the filter including your wished filter-options.
Then you set your defined filter onto your DATASET, start the filtration.
Then you get message that the filter has done its job.
Your data now should be filtered.

cora-kwok · August 11, 2022, 9:08am

Thanks for your reply.

However, the search button is no longer work given the following code.

import wixData from “wix-data” ;

let DATASET = “dataset1” ;
let dbField = “country” ;

$w . onReady (() => {
console . log ( “Page ready…” );
$w ( ‘#dataset1’ ). onReady (()=>{ console . log ( “Dataset ready…” );

$w ( ‘#button1’ ). onClick ( async ()=>{
$w ( ‘#’ + DATASET ). setFilter ( wixData . filter (). contains ( “country” , $w ( ‘#dropdown1’ ). value ))
. then (()=>{
console . log ( “Dataset is now filtered” );
})
. catch (( err )=>{ console . log ( err );
$w ( ‘#repeater1’ ). expand ();
});
});

let debounceTimer ;

$w ( ‘#dropdown1’ ). onChange ( async ()=>{
if ( debounceTimer ) {
clearTimeout ( debounceTimer );
debounceTimer = undefined ;
}

        debounceTimer  =  setTimeout (() => { 
        **let**  value  =  $w ( '#dropdown1' ). value                

            **let**  myFilter  =  wixData . filter () 
                . contains ( dbField ,  value ) 
              
               $w ( "#" + DATASET ). setFilter ( myFilter ) 
            . then (() => { console . log ( "Dataset is now filtered" )}) 
            . **catch** (( err )=> { console . log ( err );});               
        },  500 ); 
    });

cora-kwok486 · August 15, 2022, 10:50am

The above coding does not work.
If I changed to use the above coding, no matter how I click the button, or the dropdown, no response as a result.

cora-kwok · August 15, 2022, 10:59am

The above coding does not work.
If I changed to use the above coding, no matter how I click the button, or the dropdown, no response as a result.

Anyway, thanks for your reply.
I got the expected action, do the search only when I pressing the button.

Next steps, I am required to add one more action, save the input fields, after the button is clicked.

Such that the button clicked would process 2 actions.

Search
Save the input forms into dataset.

CODE-NINJA · August 15, 2022, 5:08pm

Try this…


import wixData from "wix-data";

//let lastFilterCountry;
let debounceTimer;
let DATASET = "dataset1";
let dbField = "?????????????????";


$w.onReady(() => {console.log("Page ready...");
 
    $w('#dataset1').onReady(()=>{console.log("Dataset ready...");
        $w('#button2').onClick(async()=>{
            $w('#'+DATASET).setFilter(wixData.filter()
            .contains("country", $w('#dropdown1').value))
            .then(()=>{console.log("Dataset is now filtered");})
            .catch((err)=>{console.log(err); $w('#repeater1').expand();});
        });
            
        $w('#dropdown1').onChange(async()=>{
            if (debounceTimer) {
                clearTimeout(debounceTimer);
                debounceTimer = undefined;                 
                xxx();  
            }
            else {xxx();}
        });
    });
});


function xxx() {
    debounceTimer = setTimeout(() => {
        let value = $w('#dropdown1').value;      
        let myFilter = wixData.filter().startsWith(dbField, value);
        $w("#"+DATASET).setFilter(myFilter)
        .then(() => {console.log("Dataset is now filtered now!")})
        .catch((err)=> {console.log(err);});        
    }, 500);            
    
}

cora-kwok · August 16, 2022, 4:11am

Thanks for your updated. The coding is work.

Topic		Replies	Views
How to do the search and submit at the same time. Ask the community code , question	3	102	August 17, 2022
Wix Data Filter with repeater Ask the community code , question	2	773	January 22, 2019
Filter repeters linked to different datasets with dropdown menus Ask the community code , question	1	102	November 10, 2020
Need help in Dataset/Filter Repeater Coding Ask the community code , question	0	109	March 11, 2019
Hello! I want to filter the search results with a dropdown! Ask the community code , question	14	207	September 8, 2020

How to postpone the dataset filtering by dropdown list , filtering the dataset by click on "Search" button

Related topics