I am trying to:
Get an 'active state' for filter labels (other than just a checked checkbox). By applying a class to an active label I would like to change the color of the label, and other style changes.
I expected to see:
Here is an JSFiddle, it works there, but not when applied to a toolset filter checkbox hidden link
Instead, I got:
The class doesn't change or is added and then immediately removed. I've managed to hook it to "js_event_wpv_parametric_search_results_updated", however, there is quite a long delay for class to be added.
Would you mind allowing me to have admin access to the website so that I can check on this in more detail for you.
I see it working fine before the ajax refresh but I would like to see what happens when I add it to the callback function. The private fields will be enabled for your next response.
Ok so the best solution here is to just have the code being called in the callback function altogether like this below.
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.view_changed_form (object) The jQuery object for the View form after being updated
* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
*/
(function($) {
$(document).ready(function () {
$('label').on('click',function () {
$('label').each(function(){
if($(this).find('input').prop('checked')){
$(this).addClass('geselecteerd-label');
}
else{
$(this).removeClass('geselecteerd-label');
}
});
});
$('label').each(function(){
if($(this).find('input').prop('checked')){
$(this).addClass('geselecteerd-label');
}
else{
$(this).removeClass('geselecteerd-label');
}
});
});
})(jQuery);
});
The main reason for this is that when you've add it inside of our callback function we are escaping a race condition where your code wants to run before the search is performed.
Since you have the setting in the "Which options are shown in the form entries" setting enabled to "Only show available options for each entry", the search filters will also refresh as well. In this it will clear any JS action done on the filters because the filters are being updated accordingly to the results.
In a case like this your functions will need to be re-applied when the filter is refreshed. So essentially the best workaround is to just call the function ONLY when the search results have been update like I have in the code above.
I hope I was able to adequately explain the situation for you.
The code works as you describe. There's just one thing: by sharing (or linking to) a link like hidden link it is possible for a filter to be active without a user clicking on it. That's why I also had the script execute on document ready. To check if by chance a filter has already been applied.
Is it possible to add this to your code? Or is that in conflict with "So essentially the best workaround is to just call the function ONLY when the search results have been update like I have in the code above."?
In this case if the user navigates to it from a share link you could apply the custom code as you want it. However what will happen as explained above will let the filters reset if another search is performed after.
In this case you will get the issue that you've previously described. The next workaround would just have all the filters being displayed so the filters don't need to be refreshed.
This should cause the code to be still applied even when a search is being performed.
The main problem is that we essentially can't work around this since the code must be added in the callback function if the filters refresh.
When I test the code there's a small delay the first time a filter is selected. After that, the style is applied instantly. Is there a way around that? Maybe have 'blank' filters trigger on page load?
Ok so the reason you are seeing it like this is because the code is ran after the view filters update and the view results change, which to me make sense since you will only want to see what is selected when the results update.
Unfortunately there is nothing we can do about this since it is relying on the hook for the filters ajax update to fire.
