Dropdown independent

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
}
1 Like

@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.