[Closed] Problem filtering posts by checkboxes with commas and special characters

[Author]

Posts

[davidL-7]

Hi,

I'm developing a view that includes a complex search form to filter the result set (you can view the work-in-progress at hidden link).

I'm running into trouble with the checkboxes, when the title of the checkbox has commas in it (and I'm thinking other special characters might cause trouble as well). Here's an example: In the page above, under "What areas of study are you interested in pursuing?", one of the checkboxes is "Arts".

The client wants this to read "Arts (visual, theater, dance, music, media, culinary)". I knew this would be a problem, but I thought I could remedy it by giving the custom field checkbox Title the value "Arts (visual, theater, dance, music, media, culinary)", but giving the Value to store field just the value "Arts" (see screenshot).

However, this doesn't seem to work. I'm not sure how to proceed. I currently have the Title and Value to store set to just "Arts", and it works fine. But I need to know how to successfully configure a checkbox when the visible label (aka Title) has commas (and other special characters like parentheses and slashes).

Thanks!
David

[Christopher Amirian]

Hi David,

The labels should work ok but I will need to check the live website but unfortunately the website is under server user/pass.

Please set the next reply a private and provide the server access so we can check the front end of the website.

Thanks

[Christopher Amirian]

Hi,

It seems that the large labels with commas do not work for some reason. If I want to investigate the details it might take time and possible causes that need further checking.

But I suggest a simple CSS solution. I kept the Arts as is and used the CSS code in the loop editor of the view to add the rest using the ::after pseduo code:

label[for="form-7cc87435e3d1ae46af82f7079fefdc70-3"]::after {
    content: " (visual, theater, dance, music, media, culinary)";
    font-weight: normal;    /* optional – matches the original text */
    font-style: normal;
    /* adjust colour / size if needed */
}

Thanks.

[davidL-7]

Hi Christopher,

Thanks for the quick CSS fix! I can certainly use that in a pinch, but I don't think it's going to stand up to accessibility requirements. As I'm sure you know, we're more and more obligated to comply with web accessibility standards, and I don't think a screen reader will be able to read the CSS-generated content, thus creating a barrier to non-sighted users.

I will certainly use this technique, but if you're able to find a more compliant solution, that would be great.

Best,
David

[Christopher Amirian]

Hi David,

Thanks. For sure, to be able to report this, I will need you to create a simple version of the checkbox and search page with the views on the installation below:

hidden link

As the installation above is a clean installation of Toolset and WordPress, it will help our dev team to test in a clean environment without the concern of possible non-code related problems.

So if you can replicate the problem there with a minimal scenario, that will help me to report this to the dev team.

Thank you.

[davidL-7]

Hi Christopher,

I need a small bit of help! I've built out a simple version in the sandbox site (thanks!) _except_ that I have always used the old school Views plugin (because I really don't like the WordPress block editor).

So I was fine until I got to building the view. I've started it (you'll see it in-progress on hidden link), but I'm struggling to develop the item in the loop and get the results showing. The way our filter works, it shows all results by default, and then the filter narrows them down. Could you put the finishing touches on the view so that the testing can commmence.

Here's a breakdown on the elements in this sandbox version:

Custom post type: Scholarships

Custom fields: "Custom Fields for Scholarships Custom Post Type", with one checkbox custom field named "School Major". This has two options, "Leadership", and "Arts (visual, theater, dance, music, media, culinary)" (but note that the value to store is a simple number).

There are four Scholarship posts:

Scholarship 1 should show when "Leadership" is selected.
Scholarships 2 and 3 should show when "Arts..." is selected.
Scholarship 4 should show when either is selected.

Thanks!
David

[Christopher Amirian]

Hi David,

Actually it is possible to use the classic view:

- Go to "Toolset > Settings > General".
- Find the "Editing experience" section.
- Check the "Show both the legacy and Blocks interface and let me choose which to use for each item I build" checkbox.
- Reload the browser page.
- Go to the newly added "Toolset > Views" menu.
- There you will be able to edit the views.

For more information:
https://toolset.com/course-lesson/enabling-legacy-version-of-toolset-views/

I already did that in the sample installation and you can use that method to provide a replicable scenario.

Thanks.

[davidL-7]

Thanks Christopher!

I'll finish developing the sandbox when I get the opportunity (may not be until Monday), and then let you know when it's ready.

Thanks again,
David

[Christopher Amirian]

Hi David,

Sure no worries.

[davidL-7]

Hi Christopher,

Okay, thanks for your patience... I have the sandbox built out using the legacy Views, and have reproduced the issue. See:

hidden link

All four scholarships display on page load.

Some test cases:

1) FAIL: Checking "Arts (visual, theater, dance, music, media, culinary)" and pressing "Filter Scholarships" should filter down to Scholarships 2 and 3, but returns no results.

2) SUCCESS: Checking "Leadership" and pressing "Filter Scholarships" returns Scholarships 1 and 4, as it should.

3) FAIL: Checking both boxes and pressing "Filter Scholarships" should return all four, but fails to make the match on Scholarships 2 and 3

Looking forward to seeing if you can find a way to make this work while retaining commas in the School Major custom field checkbox title.

Thanks!
David

[Christopher Amirian]

Hi,

Thank you very much for replicating the issue.

I have found a workaround that I think will satisfy the problem you had regarding the readability.

Instead of using a standard comma character that might create conflicts most probably when concatenating characters inside the code, you can use a character like comma.

Such as this character:

"，"

It is a comma with space but is one character. I used that and it worked on the installation:

hidden link

I found that character by simply googling "comma like character".

Thanks.