Hello,
I use Attribute Query Param on a select that filters jobs by sector.
It works well except when I pass the character ‘,’ encoded by %2C in the parameters.
Hey @info12! CMS filter is smart enough to load the list already filtered if there are any query params without the use of the Query Param Attribute.
You can get the correct URL by adding the fs-cmsfilter-showquery="true" attribute to the list and performing the search for the “Communications, Fundraising & Media” option.
Thanks for the info. I removed Query param and added fs-cmsfilter-showquery=“true” to the list and it works for url with reserved characters EXCEPT when the url contains a comma.
For example, this link containing a comma “%2C” doesn’t work:
Seems that posting the urls on the forum changes their formatting
But I do see what you mean. I’ll file this as a bug report for the V2 release but you can test this snippet as a workaround in the meantime.
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
const [filterInstance] = filterInstances;
// Function to get query parameter by name
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}
// Function to select the appropriate option in the dropdown
function selectJobSector() {
const sectorParam = getQueryParam('sector');
if (sectorParam) {
// Decode the sector parameter to handle any special characters like %2C (comma)
const decodedSectorParam = decodeURIComponent(sectorParam).replace(/\+/g, ' ');
// Find the option in the select that matches the decoded sector parameter
const selectElement = document.getElementById('Job-Sector');
const options = selectElement.options;
for (let i = 0; i < options.length; i++) {
if (options[i].value === decodedSectorParam) {
selectElement.selectedIndex = i;
break;
}
}
}
}
// Call the function to select the appropriate job sector
selectJobSector();
filterInstance.listInstance.on('renderitems', (renderedItems) => {
console.log(renderedItems);
});
},
]);
</script>
Hey @info12! Interesting, could you tell me how this updated code works? I’ve added an event dispatch after the selection is made for the category and simplified the code into one function
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
const [filterInstance] = filterInstances;
const selectElement = document.querySelector('[fs-cmsfilter-field="sector"]'); // Replace with your select element's selector
// Function to select the appropriate option in the dropdown
function selectJobSector() {
const sectorParam = new URLSearchParams(window.location.search).get('sector');
if (sectorParam) {
// Decode the sector parameter to handle any special characters like %2C (comma)
const decodedSectorParam = decodeURIComponent(sectorParam).replace(/\+/g, ' ');
// Find the option in the select that matches the decoded sector parameter
const selectElement = document.getElementById('Job-Sector');
const options = selectElement.options;
for (let i = 0; i < options.length; i++) {
if (options[i].value === decodedSectorParam) {
selectElement.selectedIndex = i;
break;
}
}
selectElement.dispatchEvent(new Event('input', { bubbles: true }));
}
}
// Call the function to select the appropriate job sector
selectJobSector();
filterInstance.listInstance.on('renderitems', (renderedItems) => {
// console.log(renderedItems);
});
},
]);
</script>
.