How do I set this page to allow the visitor to select only 1 tag, instead of multiple tags?
Also, I have the Dynamic Page sort as “Name - A to Z”, but when they select the tag, its not sorted as A-Z anymore?
https://www.zedsick.com/content-creators
This is the code I am using:
import wixData from 'wix-data';
const databaseName = 'Team';
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('#teamRepeater').data = filtereditemsReady;
})
}
Thank you in advance!
Thank you! The single click works, but after clicking another tag, it is still showing results from the previous selected tag.
When I click ‘News & Articles’, only 1 result should show. But after clicking a 2nd tag, it will show that 1 result on the second clicked tag as well.
Here’s what I entered:
import wixData from 'wix-data';
const databaseName = 'Team';
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('#teamRepeater').data = filtereditemsReady;
})
}
$w.onReady(function () {
$w('#selectionTags1').onChange(()=>{
let VALUE = $w('#selectionTags1').value
let LENGTH = VALUE.length
console.log(LENGTH)
for (var i = 0; i < LENGTH-1; i++) {
if(LENGTH>1) {
VALUE.shift()
}
else{ }
}
console.log(VALUE)
setTimeout(()=>{
$w('#selectionTags1').value = []
$w('#selectionTags1').value = VALUE
},1)
})
});
@zedsickwidit
UPDATED!
https://www.media-junkie.com/one-way-selection-tags
import wixData from 'wix-data';
const DATABASE = 'Team';
const DBFIELD = 'sprache';
const REPEATER = 'teamRepeater';
const ST = $w('#selectionTags2')
$w.onReady(async function() {
ST.onChange(async()=>{
let VALUE = ST.value
let LENGTH = VALUE.length
console.log("Value before ---> SHIFT: ", VALUE)
for (var i = 0; i < LENGTH-1; i++) {
if(LENGTH>1) {
let oldVALUE = await VALUE.shift()
console.log("Old VALUE ---> ", oldVALUE)
ST.value = [],
ST.value = await VALUE
let currentSelection = VALUE; console.log("Current selected VALUE ---> ", VALUE)
addItemstoRepeater(currentSelection);
}
}
});
});
function addItemstoRepeater(selectedOptions = []) {
let dataQuery = wixData.query(DATABASE);
if(selectedOptions.length>0){
dataQuery = dataQuery.hasSome(DBFIELD, selectedOptions);
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w('#'+REPEATER).data = filtereditemsReady;
})
}
@russian-dima I appreciate the update, but it’s still not working. Giving me the same results as before, but also multi-selecting now instead of 1 selection.
I also demo your site and it’s not working either. It’s selecting more than one selection and results are not filtering.
Here’s the code I used:
import wixData from 'wix-data';
const DATABASE = 'Team';
const DBFIELD = 'tags';
const REPEATER = 'teamRepeater';
const ST = $w('#selectionTags1')
$w.onReady(function () {
$w('#selectionTags1').onChange((event) => {
const selectedTag = $w('#selectionTags1').value;
addItemstoRepeater(selectedTag);
})
});
$w.onReady(async function() {
ST.onChange(async()=>{
let VALUE = ST.value
let LENGTH = VALUE.length
console.log("Value before ---> SHIFT: ", VALUE)
for (var i = 0; i < LENGTH-1; i++) {
if(LENGTH>1) {
let oldVALUE = await VALUE.shift()
console.log("Old VALUE ---> ", oldVALUE)
ST.value = [],
ST.value = await VALUE
let currentSelection = VALUE; console.log("Current selected VALUE ---> ", VALUE)
addItemstoRepeater(currentSelection);
}
}
});
});
function addItemstoRepeater(selectedOptions = []) {
let dataQuery = wixData.query(DATABASE);
if(selectedOptions.length>0){
dataQuery = dataQuery.hasSome(DBFIELD, selectedOptions);
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w('#'+REPEATER).data = filtereditemsReady;
})
}
Thanks again for your support.
@zedsickwidit
I do not understand your issue.
Everything is working in the DEMO-EXAMPLE.
Please take a look onto console…
This is the working example-page…
https://www.media-junkie.com/one-way-selection-tags
And here the results when you do following selection (one by another)…
- Deutsch
- Spanisch
- Englisch
You get back just one RESULT → “Current-Selected-Value” and also just one TAG is selected in the selection-Tag-element.
The filtering also works.
So, what exactly do not work?
The working CODE:
import wixData from 'wix-data';
const DATABASE = 'Team';
const DBFIELD = 'sprache';
const REPEATER = 'teamRepeater';
const ST = $w('#selectionTags2')
$w.onReady(async function() {
ST.onChange(async()=>{
let VALUE = ST.value
let LENGTH = VALUE.length
console.log("Value before ---> SHIFT: ", VALUE)
for (var i = 0; i < LENGTH-1; i++) {
if(LENGTH>1) {
let oldVALUE = await VALUE.shift()
console.log("Old VALUE ---> ", oldVALUE)
ST.value = [],
ST.value = await VALUE
let currentSelection = VALUE; console.log("Current selected VALUE ---> ", VALUE)
addItemstoRepeater(currentSelection);
}
}
});
});
function addItemstoRepeater(selectedOptions = []) {
let dataQuery = wixData.query(DATABASE);
if(selectedOptions.length>0){
dataQuery = dataQuery.hasSome(DBFIELD, selectedOptions);
}
dataQuery
.find()
.then(results => {
const filtereditemsReady = results.items;
$w('#'+REPEATER).data = filtereditemsReady;
})
}
Modify the code for your own DB and page-setup.
- How is called your DB ? —> “Team” ?
- How is called your related DB-FIELD in your DATABASE ?
- How is called your REPEATER.
Fill in all necessary ID-setup to get your project to make it work.
@russian-dima So I just tested your demo site and discovered something. It doesn’t work on all browsers.
It works well on:
- PC | Mozilla Firefox (no add-ons)
- Ipad | Google Chrome app
- Apple Air | Safari
Doesn’t work on:
- Google Chrome (has extension, uBlock origin activated)
- Microsoft Edge (no extensions)
Just disabled uBlock Origin and it still doesn’t work on Google Chrome.
Hi there …
First of all, I don’t see what method you are using to show the results on your page when it loads, maybe you’re using a dataset? But then why you’re refining it with a query? It doesn’t make sense, you should either use a dataset and refine it with filters, or use a query to get the items and refine them, but definitely not both.
Looks like your dataset is set to be sorted by name A-Z, but you’re not specifying that in the query.
let query = wixData.query('collection').ascending('fieldId');
@Velo-Ninja The best way to help someone is to show them how to help themselves, giving the answer on a golden plate isn’t always the good choice, we’re here to help others how to code, not to code for them, it’s against the forum community guidelines to ASK someone to do the work on their behalf, so we should only show them how to find the answer, point at their mistakes and how to fix them, I’m sure it’s easier for you to write down the solution (code), but then the visitors don’t learn anything, and we don’t want to encourage the practice of “My code isn’t working, what’s the working code”.
Ahmad
@ahmadnasriya ok, i will try to reduce my answers in that direction.
@russian-dima thank you my friend 
@zedsickwidit I do everything on Chrome → so for me it works well on Chrome (PC-Edition).
