Reset filters with javascript

David GOURDET

#239112

Hello !

how can I trigger the reset button with javascript ?

thanks a lot !

David

Add New Note to this Reply

David GOURDET

#239114

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

Add New Note to this Reply

Trevor Moderator

#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

Add New Note to this Reply

David GOURDET

#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);
    });

});

Add New Note to this Reply

Trevor Moderator

#239141

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

Add New Note to this Reply

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

Add New Note to this Reply

David GOURDET

#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

Add New Note to this Reply

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

Add New Note to this Reply

David GOURDET

#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

Add New Note to this Reply

David GOURDET

#239173

I don’t undersand the resetForm function.

Add New Note to this Reply

[Author]

Posts