[Resolved] Reset Button

[Author]

Posts

[RafaelL7560]

Hello,

I inserted the reset button to clear the filters. It works so far, only I want to hide some filters again.
Similar to this article: hidden link. com/forums/topic/split-radio-buttons-show-different-elements/.
I select a checkbox (Pic1) and then click Reset. The checkboxes are emptied (Pic2) but the filters remain unfolded (Pic3). Can I do it in such a way that after clicking on the reset button it looks like on the first picture?

The link to the page is: hidden link

Many Thanks.

[Luo Yang]

Hello,

You can setup some custom JS codes to hide those DIVs after user click the reset button, for example:

jQuery(document).ready(function($)
{
  $(".js-wpv-reset-trigger").click(function(e) { //reset button is clicked
//here add more HTML div to hide
    $("div.divUP").hide();
    $("div.divKP").hide();
  });
});

More help:
hidden link

[RafaelL7560]

Thank you so much, that's it.
Only in this example hidden link it is not quite possible yet. The checkboxes under "Branchenspezifisch" are hidden first and displayed again shortly afterwards.

[RafaelL7560]

Thank you so much, that's it.
Only in this example hidden link it is not quite possible yet. The checkboxes under "Branchenspezifisch" are hidden first and displayed again shortly afterwards.

[Luo Yang]

Seems you have added the AJAX search feature in the custom search form, then you need to use event "js_event_wpv_parametric_search_results_updated" to setup the JS codes, for example, you can modify the JS codes as below:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
    //here add more HTML div to hide
    $("div.divUP").hide();
    $("div.divKP").hide();
});

See similar thread:
https://toolset.com/forums/topic/reset-button-event-when-the-results-are-updated/

[RafaelL7560]

I have made the following settings for both. Pic1.

When I insert your code, the elements are hidden every time I click the filter. I only want all elements to be reset and selected elements to be hidden when I click on the reset button.

I have tried these two variants:

jQuery(document).ready(function($)
{
  $(".js-wpv-reset-trigger").click(function(e) { //reset button is clicked
//here add more HTML div to hide
    jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {

     $("div.divPBUP").hide();
    $("div.divPBKP").hide();
    $("div.divPBIUP").hide();
     $("div.divPBKM").hide();
    $("div.PBBranche").hide();
  });
      });
});

and

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) 
{
   //reset button is clicked
//here add more HTML div to hide
    $("div.divPBUP").hide();
    $("div.divPBKP").hide();
    $("div.divPBIUP").hide();
     $("div.divPBKM").hide();
    $("div.PBBranche").hide();
  });

The funny thing is, both examples are exactly the same, the first one hidden link works with the first solution from you and the second one hidden link not.

[Luo Yang]

Since it's a custom JS codes problem, please provide a test site with the same problem, I need to test and debug the JS codes in a live website, thanks

[Luo Yang]

I have modified your JS codes as below:

// hide div tags on input
function hide_div_js_func(){
  var myArray= [
	["Branchenspezifisch", "PBBranche"],
	["Kunden-/Marktorientierte Prozesse", "divPBKM"],
	["Kernprozesse", "divPBKP"],
	["Interne Unterstützungsprozesse", "divPBIUP"],
	["Übergreifende Prozesse", "divPBUP"]
  ];
  jQuery.each(myArray, function(index, item){
    var input_value = "input[value='" + item[0] + "']";
    var div_tag = "div." + item[1];
    jQuery(div_tag).hide();
    if(jQuery(input_value).prop("checked") == true){
      	jQuery(div_tag).show();
    }
  });
}

// load the page first time
jQuery(document).ready(function($){
  hide_div_js_func();
});

// AJAX updated result
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ){
  hide_div_js_func();
});

You can test it by this:
Go to URL hidden link
Enable the radio button "Branchenspezifisch", then click the reset button

To setup the JS array myArray, please check the document:
hidden link

[RafaelL7560]

Thanks for your help it worked. Great 🙂

I still have a little problem with the second example hidden link . If you click on the "Weitere Filter" button, additional filters are expanded. If I now click on the reset button "Zurücksetzen", the other filters remain unfolded, can this possibly be hidden?

I was dealing with the Code

jQuery(document).ready(function($)
{
  $(".js-wpv-reset-trigger").click(function(e) {
    $("div#moreFilterGM").hide();
    
  });
});

but it won't work. Could you help me with that? The access data are the same and the link for example (hidden link ) is the same as I sent you yesterday.

Thank you.

[Luo Yang]

The Views reset button is for resetting the search form, it is not for resetting reset div tags, so it is a custom codes problem, in your case, you just need modify the JS codes you mentioned above as below:

jQuery(document).ready(function($)
{
    $(".js-wpv-reset-trigger").click(function(e) {
      $("div#moreFilter").hide(); 
    });
});

I tested it in your website, it works fine, the only change is the DIV tag, from "moreFilterGM" to "div#moreFilter"

And please create new threads for the new questions, that will help other users to find the answers.

[RafaelL7560]

Thank you, I have opened a new thread: https://toolset.com/forums/topic/reset-button-does-not-hide-the-filter/

[RafaelL7560]

Good and quick help. Very good work 🙂 Thank you.