Creating an onClick event

Question

I'm very new to coding so let me say sorry if anything is unclear or if my existing code is confusing for you.

I have a website that let people search for restaurants using checkboxes, built with Wix. The way the code is set up right now, as soon as the user clicks on an alternative (let's say the check city "New York") the page updates immediately.

What I want is a Search Button that triggers the filtering event so to speak. So that when they check "New York" nothing happens until they click "Search".

Here's the code:

$w.onReady(function() {

});

//Restaurant filter

export function filterPlaces() {
  let city = [];
  let type = [];
  let vibe = [];
  let sunshine = [];

  // Get the indexes of all the checkboxes checked in that group
  let cityOptions = $w("#cityGroupBox").selectedIndices
  let typeOptions = $w('#typeGroupBox').selectedIndices
  let vibeOptions = $w('#vibeGroupBox').selectedIndices
  let sunshineOptions = $w('#sunshineGroupBox').selectedIndices
  let filter = wixData.filter();

  // Next, loop through the checked items and add each field to the array and apply filter
  if (cityOptions.length > 0) {
    for (var i = 0; i < cityOptions.length; i++) {
      city.push($w('#cityGroupBox').options[cityOptions[i]].value);
    }
  }
  if (city.length > 0) {
    filter = filter.hasSome("stad", city); //The "city" is a reference to the FiledKey in the database
  }

  if (typeOptions.length > 0) {
    for (var i2 = 0; i2 < typeOptions.length; i2++) {
      type.push($w('#typeGroupBox').options[typeOptions[i2]].value);
    }
  }
  if (type.length > 0) {
    filter = filter.hasSome("typ", type);
  }

  if (vibeOptions.length > 0) {
    for (var i3 = 0; i3 < vibeOptions.length; i3++) {
      vibe.push($w('#vibeGroupBox').options[vibeOptions[i3]].value);
    }
  }
  if (vibe.length > 0) {
    filter = filter.hasSome("bstFr", vibe);
  }

  if (sunshineOptions.length > 0) {
    for (var i4 = 0; i4 < sunshineOptions.length; i4++) {
      sunshine.push($w('#sunshineGroupBox').options[sunshineOptions[i4]].value);
    }
  }
  if (sunshine.length > 0) {
    filter = filter.hasSome("soltagg", sunshine);
  }

  $w("#dataset1").setFilter(filter)
    .then(() => {
      console.log("count after", $w("#dataset1").getTotalCount());
    })

    .catch((err) => {
      console.log(err);
    });

  $w('#resetButton').onClick(function() {
    $w('#cityGroupBox').value = undefined
    $w('#typeGroupBox').value = undefined
    $w('#vibeGroupBox').value = undefined
    $w('#sunshineGroupBox').value = undefined

    $w('#dataset1').setFilter(wixData.filter())
  });
}

Any ideas on where and how to implement this onClick event? I really appreciate any help you can provide.

Creating an onClick event

0 Answers