Hello all,
I have two dropdowns, a search button and a reset button.
I would like that the user can select a value in :
- the first dropdown (origin) only
- or second dropdown (classification) only
- or both (origin and classification)
My actual code is :
import wixData from ‘wix-data’ ;
export function button1_click ( event ) {
search ();
}
function search ( ) {
wixData . query ( “VideoAll” )
. eq ( “origin” , String ( $w ( “#dropdown1” ). value ))
. and ( wixData . query ( “VideoAll” ). eq ( “classification” , String ( $w ( “#dropdown2” ). value )))
. find ()
. then ( results => {
$w ( “#Badgerepeater” ). data = results . items ;
});
}
If I only select something in the first dropdown (origin) and click on search then it works.
If I select something in the first (origin) and second (classification) dropdown then it also works.
But if I only select something in the second (classification) dropdown then it doesn’t work.
Can you help me to fix this ?
Thank you all
Hi Florian, thanks for reaching out. I am having an issue with visualizing this concept. Are you able to link your site so I may have a better understanding and help you debug?
Thanks!
Hi Richard,
Please find below the link.
https://ffviiseriememorabi.wixsite.com/my-site
It is still a draft but I hope it will give you a better understanding of what I am looking for. It is under “Video”.
From the code above I just changed with the following :
. and ( wixData . query ( “VideoAll” ).contains( “classification” , String ( $w ( “#dropdown2” ). value )))
Let me know if you need more info.
Thank you very much
@ffvii-serie-memorabi Thanks for the reply.
I see the issue. You are chaining wixData . query ( "VideoAll" ) and the first method is . eq ( "origin" , String ( $w ( "#dropdown1" ). value )) which means that this query is going to look for what’s in #dropdown1, regardless if it’s empty or not.
What you need to do is separate out the chain.
Your pseudo code should look something like:
function search() {
if ($w("#dropdown1").value) {
// Query 'Origin' only when #dropdown1 is filled
} else if ($w("#dropdown2").value) {
// Query 'classification' only when #dropdown2 is filled
} else {
// Query for both. You can use your original code on here
}
}
@richardb
Hi,
Thank you for your answer. Unfortunately it doesn’t work. Probably because I am making something wrong. The code is :
// import data
import wixData from ‘wix-data’ ;
// search button
export function button1_click ( event ) {
search ();
}
// reset field button
export function button2_click ( event ) {
$w ( “#dataset1” ). setFilter ( wixData . filter ())
$w ( “#dropdown1” ). value = undefined
$w ( “#dropdown2” ). value = undefined
}
function search ( ) {
**if** ( $w ( "#dropdown1" ). value ) {
// Query 'Origin' only when #dropdown1 is filled
} else if ( $w ( “#dropdown2” ). value ) {
// Query ‘classification’ only when #dropdown2 is filled
} else {
// Query for both. You can use your original code on here
}
wixData . query ( "VideoAll" )
. eq ( "origin" , String ( $w ( "#dropdown1" ). value ))
. and ( wixData . query ( "VideoAll" ). contains ( "classification" , String ( $w ( "#dropdown2" ). value )))
. find ()
. then ( results => {
$w ( "#Badgerepeater" ). data = results . items ;
});
}
You will need to put your code where I left the comments. For example, your wixData.query code should be in the last else statement
my bad… Now it works for dropdown 1 alone and dropdown 2 alone but not when I select something in both whereas before only this configuration worked…
function search ( ) {
if ( $w ( “#dropdown1” ). value ) {
// Query ‘Origin’ only when #dropdown1 is filled
wixData . query ( “VideoAll” )
. eq ( “origin” , String ( $w ( “#dropdown1” ). value ))
. find ()
. then ( results => {
$w ( “#Badgerepeater” ). data = results . items ;
})
} else if ( $w ( “#dropdown2” ). value ) {
// Query ‘classification’ only when #dropdown2 is filled
wixData . query ( “VideoAll” )
. eq ( “classification” , String ( $w ( “#dropdown2” ). value ))
. find ()
. then ( results => {
$w ( “#Badgerepeater” ). data = results . items ;
})
} else {
// Query for both. You can use your original code on here
wixData . query ( “VideoAll” )
. eq ( “origin” , String ( $w ( “#dropdown1” ). value ))
. and ( wixData . query ( “VideoAll” ). contains ( “classification” , String ( $w ( “#dropdown2” ). value )))
. find ()
. then ( results => {
$w ( “#Badgerepeater” ). data = results . items ;
});
}}
@ffvii-serie-memorabi Sorry about that. Reason why it doesnt work for selecting both cases is because it falls into the if statements.
Below should work, but there is a lot of duplicate code. We should go for a DRY(Dont Repeat Yourself) approach when coding.
Let me know if you have any other questions. Thanks!
if ($w("#dropdown1").value && $w("#dropdown2").value ) {
// Query for both.
wixData.query("VideoAll")
.eq("origin", String($w("#dropdown1").value))
.and(wixData.query("VideoAll").contains("classification", String($w("#dropdown2").value)))
.find()
.then(results => {
$w("#Badgerepeater").data = results.items;
});
} else if ($w("#dropdown2").value) {
// Query 'classification' only when #dropdown2 is filled
wixData.query("VideoAll")
.eq("classification", String($w("#dropdown2").value))
.find()
.then(results => {
$w("#Badgerepeater").data = results.items;
})
} else if ($w("#dropdown1").value) {
// Query 'Origin' only when #dropdown1 is filled
wixData.query("VideoAll")
.eq("origin", String($w("#dropdown1").value))
.find()
.then(results => {
$w("#Badgerepeater").data = results.items;
})
} else {
// Error case
}
@richardb
It perfectly works! Thank you so much.
I have indeed another question. My dataset (VideoAll) has 14 items. I have 12 per page meaning that I have 2 pages for this dataset with a pagination bar to navigate.
When I make a research with my dropdowns, I have the correct number of items on the first page. But I always have my pagination bar which gives me the possibility to move to page 2 and see item #13 and item #14. How can I address this ? I hope I am clear.
Thank you
@ffvii-serie-memorabi Thanks for reaching out!
What exactly is the issue? From what I’m understanding, you have a total of 14 items, and 12 shows on the first page. There is a pagination bar which takes you to the second page with the remaining 2 items?
@richardb
If I filtrate my items with the dropdowns then I expect to have less displayed item. For example if I select “Blu-Ray” on the “classification” dropdown then I only have 7 items displayed on the first page which is exactly what I expect. But the pagination bar is always here and if I move to page 2 then I have the item #13 and item #14 which are not “Blu-Ray”.
I put a video for more clarity.
Thank you
@ffvii-serie-memorabi You will need to modify the pagination code and pass in any parameters that you used to filter the items.
https://www.wix.com/velo/reference/$w/pagination
Also, since this is a new question, we should close out this thread.