show different filters depending on selection

Anonymous

#88215

I have two search filters, one for post type – desktops, one for post type – computers.
I would like to have a dropdown where a user can select either desktops or computers and depending on their selection the relevant search filter will show.
If I create a third search filter with a dropdown for the post type, how can I create the conditional code for which filter to show?

Trevor

#88265

Field dependency is something I think we plan to build into the next major version of S&F Pro, V3.

I am aware that other users currently achieve this using custom built javascript (by hiding/revealing the fields).

You CAN filter an existing field to reflect a choice made in another field using Auto Count and Hide Empty options.

Anonymous

#89065

Do you have a example of the javascript that works?
I wrote the following code but it isn’t being trigger every time the form changes. Is this because ajax is activated?

$(".sf-input-select" ).change(function() {
  alert(selectParam);
function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}          

var selectParam = getUrlParameter('_sft_product_cat');

if (selectParam = 'laptop-computers'){
 $('#search-filter-form-455').hide();
   $('#search-filter-form-423').show();
  }
elseif(selectParam = 'desktop-computers'){
    $('#search-filter-form-455').show();
    $('#search-filter-form-423').hide();
    }
    else{
       $('#search-filter-form-455').hide();
    $('#search-filter-form-423').hide();
    }
});

Trevor

#89093

It could be. also, if you have the Auto Count second option on (which changes the form on user interaction), that may be the issue. You might use the method shown in the FAQ’s for ajaxfinish to conditionally trigger the change event on the controls, which would then in turn trigger your code? Or run your code anyway at that point?

See here at the top examples:

https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

Anonymous

#89585

Thanks for the tip.
I’m trying to use the code on the faq but it isn’t working.
Say I want to run ` var conceptName = $(‘.sf-input-select’).find(“:selected”).text();
alert(conceptName); `
It works without the ajax. When I switch on the ajax it doesn’t run.
I tried this:

//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
  console.log("ajax start");
});

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	var conceptName = $('.sf-input-select').find(":selected").text();
alert(conceptName); 
});

but it still doesn’t work. What am I doing wrong?
Thanks

Trevor

#89710

All you would need is this part:

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	var conceptName = $('.sf-input-select').find(":selected").text();
alert(conceptName); 
});

But it must be loaded correctly within WordPress itself, so like this:

(function ( $ ) {
 "use strict";
 $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
  console.log("ajax complete");
  var conceptName = $('.sf-input-select').find(":selected").text();
  alert(conceptName); 
 });
}(jQuery));

I guess that might be it?

[Author]

Posts