[Resolved] Parametric function with jQuery hide select boxes

[Author]

Posts

[qS]

Hi,

Filter code:

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="filter-results">
<h3>Search</h3>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Search content[/wpml-string]</label>
[wpv-filter-search-box output="bootstrap"]
</div>
<h3>Filter results</h3>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Continent[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-continent" url_param="wpv-wpcf-continent"]
<div class="optionBox Africa">
<label>[wpml-string context="wpv-views"]Africa[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-africa" url_param="wpv-wpcf-africa"]
</div>
<div class="optionBox Americas">
<label>[wpml-string context="wpv-views"]Americas[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-americas" url_param="wpv-wpcf-americas"]
</div>
<div class="optionBox Asia">
<label>[wpml-string context="wpv-views"]Asia[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-asia" url_param="wpv-wpcf-asia"]
</div>
<div class="optionBox Europe">
<label>[wpml-string context="wpv-views"]Europe[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-europe" url_param="wpv-wpcf-europe"]
</div>
<div class="optionBox Oceania">
<label>[wpml-string context="wpv-views"]Oceania[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-oceania" url_param="wpv-wpcf-oceania"]
</div>
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Sector[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-industry" type="select" url_param="wpv-wpcf-industry"]
</div>
[wpv-filter-submit output="bootstrap"] [wpv-filter-reset output="bootstrap"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

What I need:

1. Hide all select boxes and labels with class optionBox;
2. Select a continent (wpcf-continent) for example Africa;
3. Show select box and label 'Africa'.

It need to work with standard toolset Ajax filtering.

[qS]

Maybe something like this:

( function( $ ) {
$( document ).ready( function(){

var optionBox = $('.optionBox');
optionBox.hide();

$('#wpv_control_select_wpcf-continent').on('change', function() {
var countryBox = $(this).val();
countryBox.show;
});
});
})( jQuery );

[Nigel]

Hi there

something like that will work, but you should make it so that the class name you add to the wrapper div (where you currently have div class="optionBox Oceania", for example) should exactly match the option value in the continents select box.

You have jQuery available so you would use .change() to react to any changes in the continents dropdown, you might then want to .hide() all of the individual continent filters so that only one is shown at a time, before then using .show() to expose the individual filter where the wrapper div has a class that matches the val() of the continents selector.

hidden link
hidden link
hidden link
hidden link

If you get stuck let me know what the option values are from your continents selector and I'll take a closer look when I have time.

[qS]

( function( $ ) {
$( document ).ready( function(){

$('#wpv_control_select_wpcf-continent').on('change', function() {
var countryBox = $(this).val();
countryBox.show;
});

var optionBox = $('.optionBox');
optionBox.hide();
});
})( jQuery );

On initial load it seems to work. After selected a filter option all boxes getting showed again.
I guess it has something to do with the ajax reload..
Please help me out.

[Nigel]

If you use ajax to update the View results the entire View output in the DOM gets replaced, so any event listeners such as those you added with your code are lost.

You need to add them back again after the ajax update is complete.

If you go to the custom JS box of the Search and Pagination box you will see a "Frontend events" button that you can use to insert boilerplate code that reacts to the custom JS events triggered by Views when using ajax for pagination or search filters (see screenshot).

That will insert the following, which you can use to add back your event listener:

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
	*/
	
});