onChange Event not Triggered

Ask the community
,
1

Hello Forum,

I have a set of dropdown menus and a text box to filter results from a repeater. However, when a dropdown selection is changed, my “export function dropdown1_change(event) {…}” will not activate the content defined in my onChange event. In the console log, nothing is registered, so I assume that the event is not being activated. The onChange event looks like this:

export function iddCountry_change(event) {
console.log( ‘iddCountry change before filter’ )
filter(lastFilterConame, $w( ‘#iddCountry’ ).value);
console.log( ‘iddCountry change activated After Filter’ )
}

I have even made a dummy button to just activate a “console.log(‘string’)” message, and this isn’t activated either.

export function iddCity_change(event, $w) {
//Add your code for this event here:
console.log( ‘iddCity change before filter’ )
}

So at this point, I think I’m missing something more fundamental about activating events. I’m confused because I’ve basically been following a filtering template that I got working a while back. However, when I added the dummy button or dropdown to the old example, that onChange event is not activated either.

I would love your help and input because this problem has had me at a standstill for quite a while!

**************************** The Code **************************************

import wixLocation from ‘wix-location’ ;
import wixData from ‘wix-data’ ;

// ---------------------------------------
// Populate the dropdown menus with unique values
// ---------------------------------------

$w.onReady(() => {
createDropDown( “OrganizationList” , “country” , “#iddCountry” );
createDropDown( “OrganizationList” , “city” , “#iddCity” );
});

// Load continents dropdown using the distinct() function on the query
function createDropDown(database,category,dropdownname) {
// Run a query that returns all the items in the collection
console.log( ‘createDropDown Activated’ )
wixData.query(database)
// Get the max possible results from the query
.limit( 1000 )
.ascending(category)
.distinct(category)
.then(results => {
let distinctList = buildOptions(results.items);
// unshift() is like push(), but it prepends an item at the beginning of an array
distinctList.unshift({ “value” : ‘’ , “label” : ‘All’ });
// Call the function that builds the options list from the unique titles
$w(dropdownname).options = distinctList;
});
}

function buildOptions(items) {
return items.map(curr => {
// Use the map method to build the options list in the format {label:uniqueTitle, value:uniqueTitle}
return { label: curr, value: curr };
});
}

// ---------------------------------------
// Filtering Search Results
// ---------------------------------------

export function iddCity_change(event, $w) {
//Add your code for this event here:
console.log( ‘iddCity change before filter’ )
}

// Set some indefined variables that will hold the company and region search ()
let lastFilterConame;
let lastFilterCountry;

let debounceTimer;
export function itbConame_keyPress(event, $w) {
console.log( ‘itbConame_keypress Activated’ )
if (debounceTimer){
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#itbConame’ ).value, lastFilterCountry);
}, 200 );
}

export function iddCountry_change(event) {
//Add your code for this event here:
console.log( ‘iddCountry change before filter’ )
filter(lastFilterConame, $w( ‘#iddCountry’ ).value);
console.log( ‘iddCountry change activated After Filter’ )
}

function filter(Coname, countrydd){ //, citydd, statedd, orgtypedd, devfocusdd){
if (lastFilterConame !== Coname || lastFilterCountry !== countrydd ){
let newFilter = wixData.filter();
console.log( ‘filter activated’ )
if (Coname)
newFilter = newFilter.contains( ‘organizationName’ , Coname);
console.log( ‘Coname Filtering’ )
if (countrydd)
newFilter = newFilter.eq( ‘country’ , countrydd);
console.log( ‘countrydd Filtering’ )
$w( ‘#dataset1’ ).setFilter(newFilter);
lastFilterConame = Coname;
lastFilterCountry = countrydd;
console.log( 'lastFilterCountry: ’ )
console.log(lastFilterCountry)
}
}

**************************** The Code **************************************

2

Please do check that in the Properties panel is the event also activated.

Or

you can also try out this method -

$w("#buttonid").onChamge(() => {
        // Your code here
});
3

Thank you, Rinshul. I had no idea I had to go and “activate” the change events. Everything is functioning properly now!

4

You reached the first improving level :wink: (keep going like that!)

5

how do you activate the change event? I dont see an option. I’m also stuck with the same issue. Dropdown onChange not getting triggered,

6

@omalsen

If you use this CODE here…

$w.onReady(()=>{
    $w("#YourDropdownIDhere").onChamge(()=>{
        // Your code here (any activations needed)
    });
});

… you want need any activation.