Help with CLEAR FILTERS

Ask the community
,
1

Hi

can anyone help with this coding?

I’m trying to add a “clear all” filters (x1 text box and 3 dropdowns)

This is the best results I got after trying so many variations.

On the published page it looks OK if you do a first search and then use the clear button it clears it but when you do a second search it wont work correctly as it still has the same previous filter results.

Code:

export function ClearText_onClick(event, $w) {
  $w("#iadventures").value = undefined;
  $w("#iFar").selectedIndex = 0;
  $w("#iLong").selectedIndex = 0;
  $w("#iDifficulty").selectedIndex = 0;

$w("#dataset1").setFilter(wixData.filter())
$w("#dataset4").setFilter(wixData.filter())
$w("#dataset5").setFilter(wixData.filter())

}

1365×625 384 KB

Website page:
https://theadventuresofnova.wixsite.com/website/adventure-list

Code for whole page just incase its needed…

import wixData from "wix-data";
//working do not edit filters long, far and diff
//
//
//

$w.onReady(() => {
  loadHowFarList();
});
$w.onReady(() => {
  loadHowLongList();
});
$w.onReady(() => {
  loadDifficultyLevel();
});

let lastFilterTitle;
let lastFilterHow_Far;
let lastFilterHow_Long;
let lastFilterDifficulty;
let debounceTimer;
export function iadventures_keyPress(event, $w) {
 if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#iadventures').value, lastFilterHow_Far, lastFilterHow_Long, lastFilterDifficulty);  
  }, 500);
}

//
export function iFar_change(event) {
    filter(lastFilterTitle, $w('#iFar').value, lastFilterHow_Long, lastFilterDifficulty);
}

export function iLong_change(event) {
    filter(lastFilterTitle, lastFilterHow_Far, $w('#iLong').value, lastFilterDifficulty);
}

export function iDifficulty_change(event) {
  filter(lastFilterTitle, lastFilterHow_Far, lastFilterHow_Long, $w('#iDifficulty').value);
}
//

function filter(title, howFar, howLong, difficulty) {
 if (lastFilterTitle !== title || 
  lastFilterHow_Far !== howFar|| 
  lastFilterHow_Long !== howLong || 
  lastFilterDifficulty !== difficulty) {

 let newFilter = wixData.filter();
 if (title)
      newFilter = newFilter.contains('title', title);
 if (howFar)
      newFilter = newFilter.contains('howFar', howFar);
 if (howLong)
      newFilter = newFilter.contains('howLong', howLong);
 if (difficulty)
      newFilter = newFilter.contains('difficulty', difficulty);
    $w('#dataset1').setFilter(newFilter);   
    $w('#dataset4').setFilter(newFilter);   
    $w('#dataset5').setFilter(newFilter);   
    lastFilterTitle = title; 
    lastFilterHow_Far = howFar;
    lastFilterHow_Long = howLong;
    lastFilterDifficulty = difficulty;
  }
}

function loadHowFarList() {
  wixData.query('HowFarList')
    .find()
    .then(res => {
 let options = [{"value": '', "label": 'All Walks'}];
      options.push(...res.items.map(howFar => {
 return {"value": howFar.title, "label": howFar.title};
      }));
      $w('#iFar').options = options;
    });

}

function loadHowLongList() {
  wixData.query('HowLongList')
    .find()
    .then(res => {
 let options = [{"value": '', "label": 'All Walks'}];
      options.push(...res.items.map(howLong => {
 return {"value": howLong.title, "label": howLong.title};
      }));
      $w('#iLong').options = options;
    });

}

function loadDifficultyLevel() {
  wixData.query('DifficultyLevel')
    .find()
    .then(res => {
 let options = [{"value": '', "label": 'All Walks'}];
      options.push(...res.items.map(difficulty => {
 return {"value": difficulty.title, "label": difficulty.title};
      }));
      $w('#iDifficulty').options = options;
    });

}

//
//Reset code
//Not done yet
//
export function ClearText_onClick(event, $w) {
  $w("#iadventures").value = undefined;
  $w("#iFar").selectedIndex = 0;
  $w("#iLong").selectedIndex = 0;
  $w("#iDifficulty").selectedIndex = 0;

$w("#dataset1").setFilter(wixData.filter())
$w("#dataset4").setFilter(wixData.filter())
$w("#dataset5").setFilter(wixData.filter())

}

Many thanks

2

Hello Dean,

one of this two options should work or you…

function reset_Filter () {
  $w(DATASET).setFilter();
}

function reset_Filter () {
  $w("#myDataset").setFilter( wixData.filter() );
}
3

Hi, Thanks for the reply,

I have tried both those options but cant seem to get these to work either, I have been at this all day.

Everything looks like it should on the page when you press the reset button, text gets cleared, drop down boxes go to default and the repeater repopulates but when you do a 2nd search the previous filter is there again?

I’m not sure if my code before the resetting is interferring with it