[Resolved] Hide labels javascript has caused a couple of issues

[Author]

Posts

[catrionaD]

Tell us what you are trying to do?
Trying to hide label where there are no filter options.

Is there any documentation that you are following?
https://toolset.com/forums/topic/taxonomy-filter-label/

I tried to apply this on one field as a test.

<div class="form-group checkbox-field-container">
<label class="filterhead">Specifically designed for</label>
[wpv-control-post-taxonomy taxonomy="other" type="checkboxes" url_param="wpv-other"]
</div>

While this seems to have worked, it has also caused two issues:
1) dropdown of category and subcategory stopped working
2) results page narrowed

You can see this by going to mypickle.org

I don't know how to resolve this, can someone help please?

Thanks,
Cat

[catrionaD]

Hi, I managed to fix the above issues by defining the javascript to run after results are updated.

However I have a new issue relating to this function - let me know if I should create a new ticket?

The issue is that if I apply <div class="form-group checkbox-field-container"> to multiple label/filter fields (like Age and Gender below), then all form groups with that div class are hidden if one is empty. At least that is what I think is happening.

Can you please advise? Thanks!

<div class="form-group checkbox-field-container">
<label class="filterhead">Specifically designed for</label>
[wpv-control-post-taxonomy taxonomy="other" type="checkboxes" url_param="wpv-other"]
</div>
<div class="form-group">
<label class="filterhead">Age group</label>
[wpv-control-post-taxonomy taxonomy="age" type="select" default_label="Select age group" url_param="wpv-age" class="fheaddrop"]
</div>
<div class="form-group">
<label class="filterhead">Gender</label>
[wpv-control-post-taxonomy taxonomy="gender" type="select" default_label="Select gender" url_param="wpv-gender" class="fheaddrop"]
</div>

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL and access details so I can review whats going wrong with your setup.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Thank you for sharing access details but I do not have a way to access the Toolset or plugins.

Can you please grant administrator level permissions to the user you created and let me know.

Also, please share few screenshot and direct link of problem URL so it will be easy for me to spot the issue location.

I have set the next reply to private which means only you and I have access to it.

[catrionaD]

Sorry Minesh, that's the permissions updated.
The problem can be observed by going to mypickle.org and typing e.g. "diabetes" in the search bar.
That takes you to the results page

[Minesh]

Ok great - thank you, now I'm able to access the Toolset in backend.

I searched with the keyword "diabetes" and I redirected on the following result page:
=> hidden link

Can you please little more specific what steps I need to perform the issue or whats causing the issue, what exactly not working?

[catrionaD]

Sure, so in that results page you'll see the filter "specifically designed for" is not shown in the left column because there are no filter options available. That is because in the results view I had wrapped some code and java around it (using the Tooslet support link in my first post):

<div class="form-group checkbox-field-container">
<label class="filterhead">Specifically designed for</label>
[wpv-control-post-taxonomy taxonomy="other" type="checkboxes" url_param="wpv-other"]
</div>

I want other filter headings to have this same function applied. That is, I do not want filter labels showing if there are no filter options available.

However, when I previously wrapped the other filters in the same code as above, it meant that all filter labels became hidden if one of the filter fields was empty. It should only hide those filter fields when there are no options, it should not hide them all.

Does that make sense?

[Minesh]

Ok - So, you can use the view's AJAX events.

For instance - I've added the same CSS class "checkbox-field-container" to the "Format" filter field:

<div class="form-group checkbox-field-container">
      <label class="filterhead">[wpml-string context="wpv-views"]Format[/wpml-string]</label>
        [wpv-control-post-taxonomy taxonomy="delivery-method" type="radios" url_param="wpv-delivery-method"]
    </div>

For example - i've added the following code to your view's JS editor box:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/

checkboxCheck();
	
});

Please check the detailed information on AJAX events with the following link:
=> hidden link

Now, if you check with the following URL there is no "Format" filter option available and the label for "Format" field is not shown:
=> hidden link

you can adjust your other fields accordingly by just adding the class name to your filter field as I did.