Hi,
I'm trying to create a way for users to use selection tags to filter content in a repeater connected to a dataset referring to a collection with ID "IVFPackagesbyCountry". It needs to look up the input from the selection tag container with ID "selectionTags1" and filter the collection with tags selected from column ID "tags" and update the repeater ID "packages" with the filtered results.
Works like a charm on a test domain but the exact code with the relevant IDs doesn't work on my main domain - nothing happens when I make a change to the selection tags. The settings of the dataset are the same on test and main domains. I'm sure it's something really small. Any help will be greatly appreciated. Thanks.
// For full API documentation, including code examples, visit https://wix.to/94BuAAs
import wixData from 'wix-data';
const databaseName = 'IVFPackagesbyCountry';
const databaseField = 'tags';
$w.onReady(function () {
$w('#selectionTags1').onChange((event) => {
const selectedTag = $w('#selectionTags1').value;
addItemstoRepeater(selectedTag);
})
});
function addItemstoRepeater(selectedOption = []) {
let dataQuery = wixData.query(databaseName);
if (selectedOption.length > 0) {
dataQuery = dataQuery.hasSome(databaseField, selectedOption);
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w('#packages').data = filtereditemsReady;
})
}
Ok, turns out it works in the live version just not in the preview version!!!!
So bizarre that it would work in preview version in test domain and not on the main domain. But atleast now I have a work around not ideal but can live with that. Thanks anyways guys, closing this thread.
I got the onItemReady() to work but the filter is not working, I know I'm close.
import wixData from 'wix-data'; const collectionName = 'IVFPackagesbyCountry'; $w.onReady(function () { setRepeatedItemsInRepeater() loadDataToRepeater() $w('#selectionTags1').onChange((event) => { const selectedTags = $w('#selectionTags1').value loadDataToRepeater(selectedTags) }) }); function setRepeatedItemsInRepeater() { $w('#packages').onItemReady(($item, itemData) => { $item('#text168').text = itemData.title; }) } function loadDataToRepeater(selectedCategories = []) { let dataQuery = wixData.query(collectionName) if (selectedCategories.length > 0) { dataQuery = dataQuery.hasSome('tags', selectedCategories) } dataQuery .find() .then(results => { const itemsReadyForRepeater = results.items $w('#packages').data = itemsReadyForRepeater; }) }
Very important points here Yisrael. I can't seem to get onItemReady() to work. Any chance you could post the code I can use? Thanks!
@Parikshit Jahoorkar The WixDataQuery.hasSome() function does not return a Promise, so no need for an await or a .then().
Since you are setting the contents of the Repeater in code using the .data property, you will need to add an onItemReady() function to render the Repeater. See the sample snippets in the API documentation.
Also, is your Repeater connected to a Dataset? If so, you should disconnect it since you are setting the contents with the results of a query and this will create a conflict.
Hi Kristof,
I just tried the using await but no luck in preview. I didn't sync the collection to live just for above reasons and also because it worked in the test domain. Any pointers?
I see, interesting. I did use await in python while using selenium. Makes sense but just FYI, I didn't have to sync the database to live in my test domain. I literally just created the collection and tested the selection tag in preview and it worked. I was expected the same in the main domain.
I don't want to take it live before testing because I don't want users to get a bad experience if something doesn't work, so want to fully test out in preview before I can take it live.
I'll try with the await and test it in the preview mode. Thanks for the inputs
hi Parikshit,
First of all, are your databases synced to live? I forget it sometimes, it will work on preview but not on live website if you do not sync it.
That said, if it still doesn't work try this,
preview and live website speeds are different from each other, so maybe adding an await wil help.
change this part
dataQuery=dataQuery.hasSome(databaseField,selectedOption);
To
dataQuery=Await dataQuery.hasSome(databaseField,selectedOption);
and add Async before the function (otherwhise it won't accept the await) So
functionaddItemstoRepeater(selectedOption=[])
wil be
async functionaddItemstoRepeater(selectedOption=[])
I think the problem is that it goes to fast to
dataQuery .find() .then(results=>{ const filtereditemsReady=results.items; $w('#packages').data=filtereditemsReady; })
without adding the query .hasSome.
Kind regards, kristof