[Resolved] Remove dash from subcategories in legacy View filter dropdown

[Author]

Posts

[sarahP]

Hi,
I have created a dropdown filter within a legacy View for a custom taxonomy ("Authors"). I found that subcategories display with a dash in front, and I wish for them to display without a dash.

I found the following support ticket (https://toolset.com/forums/topic/problem-with-input-label-for-child-categories/#post-1488365) with some JS code to solve this, and I have tried to customize it for my View (and pasted it in the JS editor in the Search and Pagination section), but none of my attempts have worked. Should this code still work? If so, can you please look to see what I am doing wrong? Or suggest another method to get the categories to display without the dash?

Thank you!
Sarah

[Christopher Amirian]

Hi there,

Would you please add the link to the section that has the sub-filters so I can check? Please add it in a way that I can access it without needing to log in.

Thank you.

[sarahP]

Hi, I'm not clear on exactly what link you want...to the page that has the dropdown filter? If so, you can see it here:
hidden link
It is the second dropdown for "Authors". As you can see, some of the authors have a dash before their names since they are child terms.

And here is the code I sed for setting up the filters:

[wpv-filter-controls]<div class="content-filter">
	<label for="wpv-category">[wpml-string context="wpv-views"]Filter by Category:[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="category" type="select" output="legacy" url_param="wpv-category"]
	<label for="wpv-authors" style="padding-left:10px;">[wpml-string context="wpv-views"]Authors[/wpml-string]</label>
	[wpv-control-post-taxonomy taxonomy="authors" type="select" url_param="wpv-authors"  output="legacy"]
        [wpv-filter-spinner container="span" spinner="<em><u>hidden link</u></em>" style="padding-left:5px"][/wpv-filter-spinner]
</div>
[/wpv-filter-controls]

[Christopher Amirian]

Hi there,

Please add the JS code below to the view:

jQuery( document ).ready(function() {
  jQuery('select[name="wpv-authors"] option').each(function () {
    var theText = jQuery(this).text();
    theText = theText.replace('  -','');
    theText = theText.replace('  -','');
    theText = theText.replace('-','');
    jQuery(this).text(theText)
  });
});

https://toolset.com/course-lesson/adding-custom-javascript-to-views-templates-and-archives/

Thanks.

[sarahP]

Thanks, Christopher! Your solution got me about 95% there.

I'll leave an explanation in case this could be of use to someone else in future.

The code you shared did indeed remove the dash, but it did not remove the space, so the child terms still appeared indented.
I found that of all these lines:

theText = theText.replace('  -','');
    theText = theText.replace('  -','');
    theText = theText.replace('-',''); 

strangely, only the last line actually did anything. I tried adding non-breaking space code as used in the original support thread, but that didn't work. I replaced '-' with a copy and paste of the space and dash from the code on the frontend, and for some reason that did the trick.

Next, I discovered that this code only works the first time you choose an item from the filter. Once the term loads, the dashes reappeared. Now, I finally understand the code better from the original support link! So, I used some of the code from there and amended the code you provided also to work when the filter is updated, like so:

jQuery( document ).ready(function() {
  jQuery('select[name="wpv-authors"] option').each(function () {
    var theText = jQuery(this).text();
    theText = theText.replace('  -','');
    jQuery(this).text(theText)
  });
});
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
  jQuery('select[name="wpv-authors"] option').each(function () {
    var theText = jQuery(this).text();
    theText = theText.replace('  -','');
    jQuery(this).text(theText)
  });
});

The final issue I had was non-Toolset related...my caching plugin was deferring the loading of JS, so I had to un-defer the loading of the inline JS on the page, and now everything looks good.

I really appreciate you helping me get this fixed!