I have a dropdown that when a region is selected and button clicked, it will return all results from the dataset with that region. How do I add an if/else statement to determine which elements are displayed on my page after the button is clicked? eg. If there are matching results then display the repeater else display a ‘no results found’ message.
import wixData from 'wix-data';
$w.onReady(function () {
$w("#headerBox").hide();
$w("#resultsRepeater").hide();
$w("#errorMsg").hide();
$w("#searchButton").onClick(() => {
$w("#dataset1").setFilter(wixData.filter()
.eq("region", $w("#regionDropdown").value));
$w("#headerBox").show();
$w("#resultsRepeater").show();
});
});
Many thanks,
Rachel
I’ve tried adding the following…
if ($w("#dropdown1").value === 'true') {
$w("#headerBox").show();
$w("#resultsRepeater").show();
} else {
$w("#errorMsg").show();
}
but this always returns the #errorMsg element?
Hi Rachel,
You want something like this:
$w("#searchButton").onClick(() => {
$w("#dataset1").setFilter(wixData.filter()
.eq("region", $w("#regionDropdown").value)
)
.then(() => {
console.log("Dataset is now filtered");
let count = $w("#dataset1").getTotalCount();
if (count > 0) {
$w("#headerBox").show();
$w("#resultsRepeater").show();
}
else {
// tell user that there are no results
}
})
.catch((err) => {
console.log(err);
});
});
Disclaimer: this hasn’t been tested, but it should get you going.
Yisrael
Thank you, Yisrael. That worked perfectly!
I also need to filter my results according to another value in the dataset in that I only want to show results where availability = 1
I’m thinking I need to use the && statement but not sure how (or where) to implement it?
Rachel
Glad it worked.
See the dataset setFilter() function for more information creating more complicated filters.
Good luck,
Yisrael
Thank you again!
I have added where available = 1 but also another dropdown, which works assuming both dropdowns have a value selected. How do I filter it so that results are still returned if only one dropdown value is selected?
$w("#dataset1").setFilter(wixData.filter()
.eq("region", $w("#dropdown1").value)
.eq("specialism", $w("#dropdown2").value)
.eq("available", "1")
)
You could just use an if statement. Roughly, something like this:
if( $w("#dropdown1").value && $w("#dropdown2").value) ) {
// do setFilter() with both dropdowns
}
else if( $w("#dropdown1").value) ) {
// do setFilter() with #dropdown1
}
else if( $w("#dropdown2").value) ) {
// do setFilter() with #dropdown2
}
else {
// no dropdowns selected so no setFilter()
}
I hope this helps,
Yisrael
Many thanks again for your help, Yisrael, I understand the concept of the if/else statement but I’m unsure where I should be defining the dropdown value eg. region, as currently I am using…
.eq("region", $w("#dropdown1").value)
Thanks,
Rachel
You’ll need three separate queries as you posted above. Which query is used will be determined by the if/else.
Thanks, Yisrael.
My code now looks like this… It still needs a bit of tweaking but is nearly working!
import wixData from 'wix-data';
$w.onReady(function ()
{
$w("#repeater1").data = [];
$w("#text14").hide();
$w("#repeater1").hide();
$w("#box1").hide();
$w("#button1").onClick(() => {
if (($w("#dropdown1").value === '--All Regions--') && ($w("#dropdown2").value === '--All Specialisms--')) {
$w("#dataset1").setFilter(wixData.filter()
.eq("available", "1")
)
.then(() => {
console.log("Dataset is now filtered only by availability");
let count = $w("#dataset1").getTotalCount();
if (count > 0) {
$w("#box1").show();
$w("#repeater1").show();
} else {
$w("#box1").hide();
$w("#repeater1").hide();
$w("#text14").show();
}
})
.catch((err) => {
console.log(err);
});
} else if ($w("#dropdown1").value && $w("#dropdown2").value) {
$w("#dataset1").setFilter(wixData.filter()
.eq("region", $w("#dropdown1").value)
.eq("specialism", $w("#dropdown2").value)
.eq("available", "1")
)
.then(() => {
console.log("Dataset is now filtered by region, specialism and availability");
let count = $w("#dataset1").getTotalCount();
if (count > 0) {
$w("#box1").show();
$w("#repeater1").show();
} else {
$w("#box1").hide();
$w("#repeater1").hide();
$w("#text14").show();
}
})
.catch((err) => {
console.log(err);
});
} else if ($w("#dropdown1").value) {
$w("#dropdown2").placeholder = '--All Specialisms--';
$w("#dataset1").setFilter(wixData.filter()
.eq("region", $w("#dropdown1").value)
.eq("available", "1")
)
.then(() => {
console.log("Dataset is now filtered by region and availability");
let count = $w("#dataset1").getTotalCount();
if (count > 0) {
$w("#box1").show();
$w("#repeater1").show();
} else {
$w("#box1").hide();
$w("#repeater1").hide();
$w("#text14").show();
}
})
.catch((err) => {
console.log(err);
});
} else if ($w("#dropdown2").value) {
$w("#dropdown1").placeholder = '--All Regions--';
$w("#dataset1").setFilter(wixData.filter()
.eq("specialism", $w("#dropdown2").value)
.eq("available", "1")
)
.then(() => {
console.log("Dataset is now filtered by specialism and availability");
let count = $w("#dataset1").getTotalCount();
if (count > 0) {
$w("#box1").show();
$w("#repeater1").show();
} else {
$w("#box1").hide();
$w("#repeater1").hide();
$w("#text14").show();
}
})
.catch((err) => {
console.log(err);
});
}
});
});
My question is, Is it necessary to repeat the count for each if/else statement?
Thank you so much for your help, it is much appreciated?
Rachel