[Resolved] Cascading search fields in view

[Author]

Posts

[nicolaS-3]

Hi all,
I have a view displaying 2 search select fields: Instrument (taxonomy) and Instrument type (field). Instruments are A, B, C, D and E. I'd like Instrument type field appears only when user selects instrument A or D. I tried to set up a conditional, but I couldn't find the right settings, is it possible in some ways?
Thanks
Regards
Nicola

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share problem URL and admin access details and let me check your current view structure and once I review that I will be able to guide you in the right direction.

*** 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]

I've added the "tipo-filter" class name to "Tipo pedale" filter:
- hidden link

Then I've by default hide the filter "Tipo pedale" by adding the following custom CSS code to your view's Custom JS and CSS section's CSS section:

div.tipo-filter {
  display: none;
}

I've added the following code to custom JS box of your view block:

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

  jQuery(document).ajaxSend(function (event, jqXHR, ajaxOptions) {
    if (
      ajaxOptions.data &&
      ajaxOptions.data.indexOf('action=wpv_get_view_query_results') !== -1
    ) {
      jqXHR.abort();
    }
  });


  
  var $strumento = $('select[name="wpv-instrument"]');
  

$('select[name="wpv-instrument"]').on('change',function(){

value = $(this).val();
     

    if (
      value === 'pedali-singoli-per-basso' ||
      value === 'pedali-singoli-chitarra'
    ) {
      $('div.tipo-filter').show();
    } else {
      $('div.tipo-filter').hide();

    }
  
});


});

Can you please confirm it works as expected.

More info:
- https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-view
- https://toolset.com/course-lesson/adding-custom-javascript-to-views-templates-and-archives/#steps-for-adding-javascript-to-a-view