Hi there!
I have my "advanced filters" hidden on load of my parametric search page. I have a button that will show the filters upon pressing. The issue is, if you show the advanced filters, then click on one, the body of the page reloads via ajax to filter the results, but it also hides the advanced filters again. I don't want to show them via a callback because they shouldn't show if someone is just filtering on the first row of non-advanced filters.
I first had this done by the data-toggle="collapse" bootstrap toggle, but now have tried if via jQuery using your example at https://toolset.com/forums/topic/after-ajax-filtering-or-pagination-divs-are-open-and-not-toggled-close-anymore/ as a guide.
Here is my filter page: hidden link
My Javascript:
$(document).ready(function(){
$('.advanced-filter-toggle').click(function(){
$('#advanced-filters').css('display', 'block');
});
});
My WP-Views Filter code:
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="row">
<div class="col-sm-4">
<div class="psearch-control">
<label class="psearch-label">Degree Status</label>
[wpv-control taxonomy="degree" url_param="wpv-degree" type="select" default_label="-all-" hide_empty="false" format="%%NAME%% (%%COUNT%%)"]
</div>
<div class="psearch-control">
<label class="psearch-label">Citizenship Requirements</label>
[wpv-control taxonomy="citizenship-req" url_param="wpv-citizenship-req" type="select" default_label="-all-" taxonomy_order="ASC" taxonomy_orderby="name" hide_empty="false" format="%%NAME%% (%%COUNT%%)"]
</div>
</div>
<div class="col-sm-4">
<div class="psearch-control">
<label class="psearch-label">Acceptable GPA</label>
[wpv-control field="gpa" url_param="wpv-gpa" type="select" format="%%NAME%% (%%COUNT%%)" values=",0.01,2.00,2.50,3.00,3.50" display_values="-all-,No minimum or unknown,2.0 and lower,2.5 and lower,3.0 and higher,3.5 and higher"]
</div>
<div class="psearch-control">
<label class="psearch-label">Good For</label>
[wpv-control taxonomy="good-for" url_param="wpv-good-for" type="select" default_label="-all-" hide_empty="true" format="%%NAME%% (%%COUNT%%)"]
</div>
</div>
<div class="col-sm-4">
<div class="psearch-control">
<label class="psearch-label">Keyword Search</label>
[wpv-filter-search-box]
</div>
</div>
</div><!--row-->
<div class="row" id="advanced-filters">
<div class="col-sm-4">
<div class="psearch-control">
<label class="psearch-label">Experience Types</label>
[wpv-control taxonomy="exp-type" url_param="wpv-exp-type" type="checkboxes" hide_empty="true" format="%%NAME%% (%%COUNT%%)"]</div>
</div>
<div class="col-sm-4">
<div class="psearch-control">
<label class="psearch-label">Location Types</label>
[wpv-control taxonomy="location" url_param="wpv-location" type="checkboxes" hide_empty="false" format="%%NAME%% (%%COUNT%%)"]</div>
<div class="psearch-control">
<label class="psearch-label">Regions</label>
[wpv-control taxonomy="region" url_param="wpv-region" type="checkboxes" taxonomy_orderby="id" hide_empty="false" format="%%NAME%% (%%COUNT%%)"]</div>
</div>
<div class="col-sm-4">
<div class="psearch-control">
<label class="psearch-label">Timeframes</label>
[wpv-control taxonomy="time" url_param="wpv-time" type="checkboxes" hide_empty="false" format="%%NAME%% (%%COUNT%%)"]
</div>
<div class="psearch-control">
<label class="psearch-label">Minimum Length</label>
[wpv-control field="min-length" url_param="min-length" type="select" values=",2,6,8,10" display_values="-all-,2 weeks or less,6 weeks or less,8 weeks or less,10 weeks or less"]
</div>
</div>
</div>
<!--row-->
<div class="margin-top">
<button class="btn btn-primary advanced-filter-toggle">Show Advanced Filters</button>
[wpv-filter-reset reset_label="Reset Filters" class="btn" type="input"]
</div>
<div class="margin-top">
[wpv-filter-spinner container="div" position="before" class="filter-spinner" spinner="<em><u>hidden link</u></em>"][wpml-string context="wpv-views"]LOADING[/wpml-string][/wpv-filter-spinner]
</div>
[/wpv-filter-controls]
[wpv-filter-end]
Dear tripp,
Views provide two event handler for "AJAX parametric search results" and "AJAX pagination":
js_event_wpv_parametric_search_results_updated
js_event_wpv_pagination_completed
For example, you can try this, edit your view, in section "Filter", click button "JS editor", use below JS codes:
jQuery(document).ready(function($) {
$( document ).on( 'js_event_wpv_pagination_completed', function() {
my_custom_js_func();
});
$( document ).on( 'js_event_wpv_parametric_search_results_updated', function() {
my_custom_js_func();
});
function my_custom_js_func(){
//$('input').on('change', function() {})
// add your custom JS codes here
}
});
Hi, I think I have sorted through, using a variation of your code. The code didn't originally work because the advanced filter button is within the form element that WP-Views refreshes when a filter changes. Here's what I came up with, using a global variable that is set if my advanced filters are visible when the parametric search is triggered. Upon reload, it checks that variable, "advancedFilterStatus" and opens the toggle.
jQuery(document).ready(function(){
window.advancedFilterStatus = 'hidden'
$('.advanced-filter-toggle').click(function(){
$('#advanced-filters').toggle();
});
});
jQuery( document ).on('js_event_wpv_parametric_search_triggered', function(){
if($('#advanced-filters').is(':visible')){
window.advancedFilterStatus = 'visible';}
});
jQuery(document).on('js_event_wpv_parametric_search_results_updated', function(){
if(advancedFilterStatus == 'visible'){
$('#advanced-filters').toggle();
}
$('.advanced-filter-toggle').click(function(){
$('#advanced-filters').toggle();
window.advancedFilterStatus = 'hidden';
});
});
