When creating a Voyage (CPT), there is a Select field where a user specifies option 1 or option 2. Based on their selection they will then be given different fields for inputting voyage dates.
Option 1 gives them a repeating field to enter multiple Start Date & Times and a 'voyage length' field to state how many hours long the voyage will be.
Option 2 Gives them fields to enter a Start Date and an End Date for the voyage.
My ideal situation would be a single archive page listing all results, where users have the option to filter to show only Option 1 results or only Option 2 results then set a Date Range in order to further filter the results.
The problem is that the date fields are not the same for both Options.
The solution I envisage is that the correct date filters will only display for the when and if the right option is selected.
I have found a related thread at https://toolset.com/forums/topic/conditional-display-of-filter-fields/
This would be the beginning of a solution, but I would need any filters that are conditionally hidden to not be applied if a value had been entered into them previously. Is this possible?
I haven't found the solution yet, but I figured best share progress here to help...
I have the following JS code which successfully hides and shows items as required based on the select field value.
However, I am still unable to empty the date field values. The single line of code posted below is similar to what I'm trying but with no luck.
jQuery( '.wpv-date-front-end[data-param=wpv-wpcf-voyage-disembarkation-date]' ).datepicker( "setDate", null );
( function( $ ) {
$( document ).ready( function(){
// Initially hide filter
$('.voyage-date-filters').hide();
$('.excursion-date-filters').show();
// Add change listener to other filter
$('select[name="wpv-wpcf-voyage-or-excursion"]').change( function(){
if ( $(this).val() == "2" ) {
$('.voyage-date-filters').show();
$('.excursion-date-filters').hide();
}
if ( $(this).val() == "1" ) {
$('.excursion-date-filters').show();
$('.voyage-date-filters').hide();
jQuery( '.wpv-date-front-end[data-param=wpv-wpcf-voyage-disembarkation-date]' ).datepicker( "setDate", null );
}
});
});
})( jQuery );
Hi,
As you can see there isn't such a built-in feature within Views plugin, it needs custom JS codes.
In your case, I suggest you reset the hidden field "wpv-wpcf-voyage-disembarkation-date" instead of the datepicker, the hidden field wpv-wpcf-voyage-disembarkation-date" will pass the URL parameter to the view, but the datepicker don't.
For example, you can replace this line of your codes from:
jQuery( '.wpv-date-front-end[data-param=wpv-wpcf-voyage-disembarkation-date]' ).datepicker( "setDate", null );
To:
jQuery( 'input[name=wpv-wpcf-voyage-disembarkation-date]' ).val( null );
Ok, I think this is working with the below code
jQuery(document).ready( function() {
jQuery('.wpv-date-front-end[data-param=wpv-wpcf-voyage-excursion-departure-date-and-time_min]').datepicker('option', 'minDate', new Date());
});
jQuery(document).ready( function() {
jQuery('.wpv-date-front-end[data-param=wpv-wpcf-voyage-excursion-departure-date-and-time_max]').datepicker('option', 'minDate', new Date());
});
( function( $ ) {
$( document ).ready( function(){
// Initially hide filter
$('.voyage-date-filters').hide();
$('.excursion-date-filters').hide();
// Add change listener to other filter
$('select[name="wpv-wpcf-voyage-or-excursion"]').change( function(){
if ( $(this).val() == "2" ) {
$('.voyage-date-filters').show();
$('.excursion-date-filters').hide();
jQuery( 'input[name=wpv-wpcf-voyage-excursion-departure-date-and-time_min]' ).val('');
jQuery( 'input[name=wpv-wpcf-voyage-excursion-departure-date-and-time_max]' ).val('');
}
if ( $(this).val() == "1" ) {
$('.excursion-date-filters').show();
$('.voyage-date-filters').hide();
jQuery( 'input[name=wpv-wpcf-voyage-disembarkation-date]' ).val('');
jQuery( 'input[name=wpv-wpcf-voyage-embarkation-date]' ).val('');
}
});
});
})( jQuery );
I will test this a little more and let you know if it's all working correctly.
In the meantime, is there a way to hide and show options in a select field filter based on the above options also?
I have tried the following...
jQuery( 'input[name=wpv_sort_orderby').children('option[value="field-wpcf-voyage-embarkation-date"]').attr('disabled','disabled');
Also tried with .css('display','none'); and .hide(); but with no luck. Is it that I'm accessing the field options wrong?
You can add/remove the attribute "disabled" of HTML "option" tag, see document:
hidden link
disabled
Specifies that an option should be disabled
Hi Luo,
I have tried .attr("disabled", true"); and also .prop("disabled", true); but neither have worked
Another option, which would be ideal, would be to change the value of the select field instead, I have tried the codes below but neither work.
Is it possible there is a problem isolating the correct select field?
jQuery( 'input[name=wpv_sort_orderby').children('option[value="field-wpcf-voyage-embarkation-date"]').val('field-wpcf-voyage-excursion-departure-date-and-time');
jQuery( 'input[name=wpv_sort_orderby').children('option[value="field-wpcf-voyage-embarkation-date"]').val('option[value="field-wpcf-voyage-excursion-departure-date-and-time"]');
For reference, the problem url is hidden link and the code is below
[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="form-group">
<label>[wpml-string context="wpv-views"]Voyage or Excursion[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-voyage-or-excursion" url_param="wpv-wpcf-voyage-or-excursion"]
</div>
<div class="voyage-date-filters">
<p>Voyage date filters</p>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Voyage Embarkation Date[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-voyage-embarkation-date" date_format="M j, Y" default_date="" url_param="wpv-wpcf-voyage-embarkation-date"]
</div>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Voyage Disembarkation Date[/wpml-string]</label>
[wpv-control-postmeta field="wpcf-voyage-disembarkation-date" date_format="M j, Y" url_param="wpv-wpcf-voyage-disembarkation-date"]
</div>
</div>
<div class="excursion-date-filters">
<p>Excursion date filters</p>
<div class="form-group">
<label>[wpml-string context="wpv-views"]Date Range[/wpml-string]</label><br>
From: [wpv-control-postmeta field="wpcf-voyage-excursion-departure-date-and-time" date_format="M j, Y" default_date="" url_param="wpv-wpcf-voyage-excursion-departure-date-and-time_min" id="excursion1"]<br>
To: [wpv-control-postmeta field="wpcf-voyage-excursion-departure-date-and-time" date_format="M j, Y" default_date="" url_param="wpv-wpcf-voyage-excursion-departure-date-and-time_max" id="excursion2"]
</div>
</div>
[wpv-sort-orderby type="select" options="post_date,field-wpcf-voyage-embarkation-date,field-wpcf-voyage-excursion-departure-date-and-time" label_for_post_date="Post Date" label_for_field-wpcf-voyage-embarkation-date="Departure Date (Voyages ONLY)" label_for_field-wpcf-voyage-excursion-departure-date-and-time="Departure Date (Excursions ONLY)" orderby_as_numeric_for="field-wpcf-voyage-embarkation-date,field-wpcf-voyage-excursion-departure-date-and-time" orderby_ascending_for="field-wpcf-voyage-embarkation-date,field-wpcf-voyage-excursion-departure-date-and-time" orderby_descending_for="post_date"][wpv-sort-order type="select" options="desc,asc" label_for_asc="Ascending" label_for_desc="Descending" label_asc_for_post_date="Oldest First" label_desc_for_post_date="Newest First" label_asc_for_field-wpcf-voyage-embarkation-date="Older first" label_desc_for_field-wpcf-voyage-embarkation-date="Newer first" label_asc_for_field-wpcf-voyage-excursion-departure-date-and-time="Older first" label_desc_for_field-wpcf-voyage-excursion-departure-date-and-time="Newer first"]
<br>
[wpv-filter-reset output="bootstrap"][wpv-filter-submit name="Search" output="bootstrap"]
[/wpv-filter-controls]
[wpv-filter-end]
jQuery(document).ready( function() {
jQuery('.wpv-date-front-end[data-param=wpv-wpcf-voyage-excursion-departure-date-and-time_min]').datepicker('option', 'minDate', new Date());
});
jQuery(document).ready( function() {
jQuery('.wpv-date-front-end[data-param=wpv-wpcf-voyage-excursion-departure-date-and-time_max]').datepicker('option', 'minDate', new Date());
});
( function( $ ) {
$( document ).ready( function(){
// Initially hide filter
$('.voyage-date-filters').hide();
$('.excursion-date-filters').hide();
// Add change listener to other filter
$('select[name="wpv-wpcf-voyage-or-excursion"]').change( function(){
if ( $(this).val() == "2" ) {
$('.voyage-date-filters').show();
$('.excursion-date-filters').hide();
jQuery( 'input[name=wpv-wpcf-voyage-excursion-departure-date-and-time_min]' ).val('');
jQuery( 'input[name=wpv-wpcf-voyage-excursion-departure-date-and-time_max]' ).val('');
// jQuery( 'input[name=wpv_sort_orderby').children('option[value="field-wpcf-voyage-excursion-departure-date-and-time"]').attr('disabled','disabled');
}
if ( $(this).val() == "1" ) {
$('.excursion-date-filters').show();
$('.voyage-date-filters').hide();
jQuery( 'input[name=wpv-wpcf-voyage-disembarkation-date]' ).val('');
jQuery( 'input[name=wpv-wpcf-voyage-embarkation-date]' ).val('');
jQuery( 'input[name=wpv_sort_orderby').children('option[value="field-wpcf-voyage-embarkation-date"]').val('option[value="field-wpcf-voyage-excursion-departure-date-and-time"]');
}
});
});
})( jQuery );
You will need to setup the "disabled" attribute's value as "disabled", for example:
.attr("disabled", "disabled");
Please check the document I mentioned above:
hidden link
Attribute:disabled
Value: disabled
Description: Specifies that an option should be disabled
I assume the original question of this thread has been resolved:
https://toolset.com/forums/topic/how-to-display-and-apply-front-end-filters-conditionally-based-on-another-filter/#post-619488
If you need more assistance for the new question:
hide and show options in a select field filter based on the above options
Please create new thread for the new question, that will help other users to find the answers.
Yes, the original issue is resolved, thank you.
I also resolved the second issue mentioned without the need for a new ticket, code below for reference of others...
$("select[name='wpv_sort_orderby']").find("option[value=field-wpcf-voyage-embarkation-date]").attr("selected", "selected");
$("select[name='wpv_sort_orderby']").find("option[value=field-wpcf-voyage-excursion-departure-date-and-time]").attr("disabled", "disabled");
For the reference of other users working on similar issues I have also opened a new ticket at https://toolset.com/forums/topic/issue-resetting-view-filters-when-page-is-refreshed/ to deal with a related issue on page refreshing.
