[SOLVED] The same code doesn't work on another site (dropdown filters)

Ask the community
,
1

Hello,
I’m currently creating a website in which I want to add a dropdown filtering projects in a database. It’s supposed to work exactly like on this page (another website I designed), which was made with a repeater connected to a dataset, with a filter settings connected to the dropdown. When selecting “Toutes les séances” (" Every screenings "), it resets the filter and shows every item.

For the website I’m currently designing, I want the exact same feature. I copied-pasted my code and changed everything proper to my new site ( highlighted )


import wixData from 'wix-data';
 export function dropdown2_change(event){
 let filterType = $w('#dropdown2').value;
 if (filterType === "Tout"){
         $w('#dataset1').setFilter(wixData.filter());
   } else{
         $w('#dataset1').setFilter(wixData.filter().contains("type", filterType));
   }  
 }

The dropdown can filter through my categories but when selecting “Tout” (“All”), it erases every items instead of showing them all.

My dropdown has a “Tout” choice, the “Tout” being written with a capital T in both label and value fields. I checked if it was correctly connected to the proper dataset etc and everything looks fine, otherwise I probably wouldn’t be able to filter through the different categories.

Thanks to whoever can help me figuring this out!

2

Hey there …

First things first, dynamic event handlers are different than static event handlers like the one you’re using, static event handlers must be configured on each element one at a time by clicking on the element, then add the intended event handler from the element’s property panel.

So my suggestion is to configure each element individually, or better, change the handler type to dynamic instead of static.

Here’s the difference between static and dynamic event handlers:

// Static event handler
export function dropdown_change(event) {}

// Dynamic event handler
$w('#dropdown').onChange((event) => {})

You need to update the IDs of your elements in your code as well when copying an element from a page to another, if the second page already has a child element with the same ID, the pasted element will get a new ID.

3

Hey!

Thanks for your answer. As suggested, I switched to a dynamic event handler, changed the #dropdown ID to the good one (in my case, it’s simply #dropdown2) but unfortunately nothing changes. But the page from which I wanted to replicate the dropdown worked great while it was a static event handler so I guess the issue is somewhere else?

And as said above, I updated the IDs so it matches my new site.
#dropdown2 → is the dropdown menu with my filters
" Tout " → the name of my filter in the dropdown choices (both value and label)
#dataset1 → the dataset through which I’m filtering the items
" type " → the field key from the category I want to filter through

I thought it was also worth mentioning: I have another code that loads more items when we scroll to a invisible button (so it can make it look like an infinite scroll, like on social networks)

export function button1_viewportEnter_1(event, $w) {
      $w("#dataset1").loadMore()
      .then( () => {
      console.log("Done loading more data");
    });
}

I erased it just in case but it doesn’t change either

4

@aprodstudios The viewport event handler doesn’t have any effect in this case, although it should be replaced with a dynamic event handler.

Keep in mind that dynamic event handlers must reside inside the page’s $w.onReady( ) function in order to work.

$w.onReady(() => {
    $w('#dropdown').onChange((event) => {})
})
5

@ahmadnasriya I added the $w.onReady() function but now the filter doesn’t work at all (before it could filter but couldn’t reset the filter to show every items)

Here’s the full code in my page (I haven’t changed the viewport event handler yet) :

import wixData from 'wix-data';

$w.onReady(() => {
    $w('#dropdown2').onChange((event) => {})
     let filterType = $w('#dropdown2').value;
 if (filterType === "Tout"){
         $w('#dataset1').setFilter(wixData.filter());
   } else{
         $w('#dataset1').setFilter(wixData.filter().contains("type", filterType));
   }  
})


export function button1_viewportEnter_1(event, $w) {
      $w("#dataset1").loadMore()
      .then( () => {
      console.log("Done loading more data");
    });
}
6

@aprodstudios your code should be inside the event handler code block, right now, your code is inside the page’s onReady() function, and the dropdown onChange() event handler is empty.

7

@ahmadnasriya Oh, yes thanks!!
It’s fixed now, thank you so much for your help

If others have the same issue, here’s the code that worked for me:

import wixData from 'wix-data';

$w.onReady(() => {
    $w('#dropdown2').onChange((event) => {
     let filterType = $w('#dropdown2').value;
 if (filterType === "Tout"){
         $w('#dataset1').setFilter(wixData.filter());
   } else{
         $w('#dataset1').setFilter(wixData.filter().contains("type", filterType));
   }  })
})

Have a nice day :slight_smile:

8

@aprodstudios you’re welcome :wink: