# Attributes Query Param and reserved character "," %2C

**URL:** <https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278>\
**Category:** Attributes\
**Tags:** cmsfilter, queryparam\
**Created:** [August 14, 2024, 3:52pm UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278 "2024-08-14T15:52:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![info12](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info12/32/1020_2.png) [@info12](https://forum.finsweet.com/u/info12)\
**Post date:** [August 14, 2024, 3:52pm UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278/1 "2024-08-14T15:52:26Z")

</div>

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.

 ![Capture d’écran 2024-08-14 175110](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/e/e67204c2d5c2f353c83aee4726e912e04dd5272b.png)

Example:

**URL that works:**  
[https://www.medair.org/jobs?sector=Senior%20Management](https://www.medair.org/jobs?sector=Senior%20Management)

[https://www.medair.org/jobs?sector=Logistics%20%26%20Supply%20Chain%20Management](https://www.medair.org/jobs?sector=Logistics%20%26%20Supply%20Chain%20Management)

[https://www.medair.org/jobs?sector=Program%20%2F%20Project%20Management](https://www.medair.org/jobs?sector=Program%20%2F%20Project%20Management)

**URL that doesn’t work:**

[https://www.medair.org/jobs?sector=Communications%2C%20Fundraising%20%26%20Media](https://www.medair.org/jobs?sector=Communications%2C%20Fundraising%20%26%20Media)

[https://www.medair.org/jobs?sector=Water%2C%20Sanitation%20%26%20Hygiene](https://www.medair.org/jobs?sector=Water%2C%20Sanitation%20%26%20Hygiene)

Can you help me solve this?

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [August 14, 2024, 4:18pm UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278/2 "2024-08-14T16:18:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![info12](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info12/32/1020_2.png) [@info12](https://forum.finsweet.com/u/info12)\
**Post date:** [August 19, 2024, 8:52am UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278/3 "2024-08-19T08:52:34Z")

</div>

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:

> **[Humanitarian Jobs - Pathway to a meaningful career with Medair](https://www.medair.org/jobs?sector=Health%2C%20Nutrition%20%26%20Psychosocial%20Support)**
>
> Explore current job opportunities with Medair in the humanitarian sector – your pathway to a meaningful career.

But this one does:

> **[Humanitarian Jobs - Pathway to a meaningful career with Medair](https://www.medair.org/jobs?sector=Shelter%2B%26%2BInfrastructure)**
>
> Explore current job opportunities with Medair in the humanitarian sector – your pathway to a meaningful career.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [August 19, 2024, 12:08pm UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278/4 "2024-08-19T12:08:00Z")

</div>

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.

```js
<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>

```

Let me know if this fixes the issue !

---

<div class="post-metadata">

**Author:** ![info12](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info12/32/1020_2.png) [@info12](https://forum.finsweet.com/u/info12)\
**Post date:** [August 19, 2024, 1:20pm UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278/5 "2024-08-19T13:20:51Z")

</div>

YES it works, Finsweet and Luis are the best! ❤

---

<div class="post-metadata">

**Author:** ![info12](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info12/32/1020_2.png) [@info12](https://forum.finsweet.com/u/info12)\
**Post date:** [September 12, 2024, 7:51am UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278/6 "2024-09-12T07:51:07Z")

</div>

Hello Luis, the issue has returned.  
I properly integrated the code you sent me, and it seemed to be working.  
For example, with this link, the “select” does change when the page loads, but the list items are not filtered:  
[https://www.medair.org/jobs?sector=Water%2C%20Sanitation%20%26%20Hygiene](https://www.medair.org/jobs?sector=Water%2C%20Sanitation%20%26%20Hygiene)  
However, this one works:  
[https://www.medair.org/jobs?sector=Logistics+%26+Supply+Chain+Management](https://www.medair.org/jobs?sector=Logistics+%26+Supply+Chain+Management)

As a reminder, the error only occurs when there is a comma in the filter.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 12, 2024, 7:05pm UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278/7 "2024-09-12T19:05:06Z")

</div>

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

```js
<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>

```

---

<div class="post-metadata">

**Author:** ![info12](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/info12/32/1020_2.png) [@info12](https://forum.finsweet.com/u/info12)\
**Post date:** [September 18, 2024, 7:56am UTC](https://forum.finsweet.com/t/attributes-query-param-and-reserved-character-2c/3278/8 "2024-09-18T07:56:21Z")

</div>

Hello sorry for the late response. Yes it works now 👍.