Reset filters with javascript

Anonymous

#239112

Hello !

how can I trigger the reset button with javascript ?

thanks a lot !

David

Anonymous

#239114

PS : I tried
jQuery('.search-filter-reset').trigger('click');
but without success

Trevor

#239128

I am not sure there is a simple answer until V3 releases (a few weeks away we hope), but this might give you some ideas:

https://support.searchandfilter.com/forums/topic/reset-filters-on-search-results-page/#post-183441

Anonymous

#239138

Hello Trevor,

I tried to implement this solution but it doesn’t work, maybe because I’m using ajax ?
The problem is that my radio buttons disappear when I use another filter and it breaks my script.

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

    const depts = document.querySelectorAll('#departements path');
    const results = document.querySelector('.search-filter-results');
    const villes = document.querySelector('.sf-field-taxonomy-ville');
    const services = document.querySelector('.sf-field-taxonomy-service');
    const reset = document.querySelector('.sf-field-reset');

    function handleDeptClick(e) {

        depts.forEach(dept => {
            dept.classList.remove('active');
        });
        const deptPath = e.target;
        const departementNum = deptPath.className.baseVal.split('-').pop();
        console.log(<code>departementNum: ${departementNum}</code>);
        deptPath.classList.add('active');
        const inputRadioSelector = <code>input.sf-input-radio[value=&quot;${departementNum}&quot;]</code>;
        const inputRadio = document.querySelector(inputRadioSelector);
        if ( inputRadio.checked === false ) { // FAILS BECAUSE inputRadio IS EQUAL TO NULL IF WE USE ANOTHER SET OF FILTERS
            inputRadio.checked = true;
        } 
        while(results.firstChild)
            results.removeChild(results.firstChild);
        jQuery('.searchandfilter').submit();
    }

    depts.forEach(dept => {
        dept.addEventListener('click', handleDeptClick);
    });

});

Trevor

#239141

OK. I will need to refer this to the plugin developer, Ross, for his input.

Ross Moderator

#239146

Hi David

The link Trevor provided uses our sf:init event, to capture the search form object into the variable searchForm which you can then use to perform a .reset() on it.

Are you saying you did this, and it didn’t work?

Can you show me the code you tried, using the example code Trevor sent?

Thanks

Anonymous

#239150

Hi Ross,

thanks for your help !

this is my code :

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

    var searchForm = {};

    function resetForm(){
        searchForm.resetForm(false);
    }

    $(document).on("sf:init", ".searchandfilter", function(e, data){
        searchForm = data.object;
    });
    
    const depts = document.querySelectorAll('#departements path');
    const results = document.querySelector('.search-filter-results');
    const villes = document.querySelector('.sf-field-taxonomy-ville');
    const services = document.querySelector('.sf-field-taxonomy-service');
    const reset = document.querySelector('.sf-field-reset');

    function handleDeptClick(e) {

        resetForm();

        depts.forEach(dept => {
            dept.classList.remove('active');
        });
        const deptPath = e.target;
        const departementNum = deptPath.className.baseVal.split('-').pop();
        deptPath.classList.add('active');
        const inputRadioSelector = <code>input.sf-input-radio[value=&quot;${departementNum}&quot;]</code>;
        const inputRadio = document.querySelector(inputRadioSelector);
        if ( inputRadio.checked === false ) {
            inputRadio.checked = true;
        }
        results.classList.add('active');
        while(results.firstChild)
            results.removeChild(results.firstChild);
        jQuery('.searchandfilter').submit();
    }

    depts.forEach(dept => {
        dept.addEventListener('click', handleDeptClick);
    });

});

searchForm is equal to an empty object, maybe I miss something here
and the form doesn’t reset (but I have no error)

Thanks,

David

Ross Moderator

#239154

Hi David

I think sf:init may be firing before you hook into it – did you try a console.log to see if event was triggered? – try bringing that code block outside of jQuery(document).ready

Check the last example here:
https://searchandfilter.com/documentation/faq/#will-my-lightbox-or-other-fancy-javascript-work-with-this-plugin

Of the ideal JS structure to hook into the event – its after the comment //depending on where you add your JS, sometimes its necessar....

Let me know how you get on.

Thanks

Anonymous

#239161

Hi Ross,

I tried this (and many other things) :

(function ( $ ) {
    "use strict";

    var searchForm = {};

    function resetForm(){
        searchForm.resetForm(false);
    }

    $(document).on("sf:init", ".searchandfilter", function(e, data){
        searchForm = data.object;
        console.log("S&F JS initialised");
    });

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

        const depts = document.querySelectorAll('#departements path');
        const results = document.querySelector('.search-filter-results');
        const villes = document.querySelector('.sf-field-taxonomy-ville');
        const services = document.querySelector('.sf-field-taxonomy-service');
        const reset = document.querySelector('.sf-field-reset');

        function handleDeptClick(e) {
            
            resetForm();

            depts.forEach(dept => {
                dept.classList.remove('active');
            });
            const deptPath = e.target;
            const inputRadioNull = document.querySelector('.sf-item-0 input.sf-input-radio');
            inputRadioNull.checked = true;

            const departementNum = deptPath.className.baseVal.split('-').pop();
            deptPath.classList.add('active');
            const inputRadioSelector = <code>input.sf-input-radio[value=&quot;${departementNum}&quot;]</code>;
            const inputRadio = document.querySelector(inputRadioSelector);
            if ( inputRadio.checked === false ) {
                inputRadio.checked = true;
            }
            while(results.firstChild)
                results.removeChild(results.firstChild);
            $('.searchandfilter').submit();
        }

        depts.forEach(dept => {
            dept.addEventListener('click', handleDeptClick);
        });

    });

}(jQuery));

The sf:init event seems to be triggered. My console says : “S&F JS initialised”

I always have an error on this line :
if ( inputRadio.checked === false ) { because inputRadio is null (cause it’s not in the DOM anymore, the resetForm function doesn’t seem to work).
Uncaught TypeError: Cannot read property 'checked' of null

David

Anonymous

#239173

I don’t undersand the resetForm function.

[Author]

Posts