Search & Filter Support

Viewing 6 results - 1 through 6 (of 6 total)

Author

Search Results

April 7, 2020 at 9:43 am #239236

In reply to: Reset filters with javascript

Anonymous

Inactive

Hello Ross,

Sorry for the inconvenience, but actually I’m a bit lost : do I still need to reset form in this configuration (with the resetForm function) ?

I tried this :

(function ( $ ) {
    "use strict";

    var searchForm = {};

    const depts = document.querySelectorAll('#departements path');
    const deptsRadioListEls = document.querySelectorAll('.sf-field-taxonomy-departement ul li');
    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 resetForm(){
        searchForm.resetForm(false);
    }

    function eventDeptClickHandler() {
        depts.forEach(dept => {
            dept.addEventListener('click', function(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;
                }
                while(results.firstChild)
                    results.removeChild(results.firstChild);

                jQuery('.searchandfilter').submit();
            });
        });
    }

    $(document).on("sf:init", ".searchandfilter", function(e, data){
        searchForm = data.object;
        eventDeptClickHandler();
    });

    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        eventDeptClickHandler();
    });

}(jQuery));

So I thought maybe I didn’t understand what you meant by “to grab the new copies”.

And I tried this instead :


(function ( $ ) {
    "use strict";

    var searchForm = {};

    let form = document.querySelector('.searchandfilter'); // NEW LINE
    const formContent = form.innerHTML; // NEW LINE
    const depts = document.querySelectorAll('#departements path');
    const deptsRadioListEls = document.querySelectorAll('.sf-field-taxonomy-departement ul li');
    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 resetForm(){
        searchForm.resetForm(false);
    }

    function eventDeptClickHandler() {
        depts.forEach(dept => {
            dept.addEventListener('click', function(e) {
                resetForm();

                form.innerHTML = formContent;  // NEW LINE

                depts.forEach(dept => {
                    dept.classList.remove('active');
                });
                const deptPath = e.target;

                // remove sf-option-active on all list elements
                deptsRadioListEls.forEach(el => { // NEW LINE
                    el.classList.remove('sf-option-active'); // NEW LINE
                    const radioInput = el.querySelector('input.sf-input-radio'); // NEW LINE
                    radioInput.checked = false; // NEW LINE
                }); // NEW LINE

                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);
                inputRadio.parentElement.classList.add('sf-option-active'); // NEW LINE
                if ( inputRadio.checked === false ) {
                    inputRadio.checked = true;
                }

                while(results.firstChild)
                    results.removeChild(results.firstChild);

                jQuery('.searchandfilter').submit();
            });
        });
    }

    $(document).on("sf:init", ".searchandfilter", function(e, data){
        searchForm = data.object;
        eventDeptClickHandler();
    });

    $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
        eventDeptClickHandler();
    });

}(jQuery));

but it didn’t work, I was unable to change the checked states and to move the sf-option-active on the good element.

Any help very much appreciated,

Best,

David

April 6, 2020 at 4:34 pm #239161

In reply to: Reset filters with javascript

Anonymous

Inactive

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

April 6, 2020 at 3:22 pm #239150

In reply to: Reset filters with javascript

Anonymous

Inactive

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

April 6, 2020 at 1:48 pm #239138

In reply to: Reset filters with javascript

Anonymous

Inactive

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

});

April 12, 2019 at 6:35 pm #208330

In reply to: Not inherit the design post in the results of the search

Trevor

Participant

To do this you will need to create custom CSS. There are many posts with examples in. This search will reveal many:

https://support.searchandfilter.com/forums/search/.searchandfilter+.sf-input-radio/

November 6, 2018 at 9:26 am #192852

In reply to: Large search bar on top

Trevor

Participant

This would turn the radio buttons to selectable ‘tags’:

.sf-input-radio:checked + .sf-label-radio {
  background-color: #000;
  color: #eee;
}
.searchandfilter li[data-sf-field-input-type=radio] label.sf-label-radio {
  padding: 5px 8px;
  margin-right: 8px;
  cursor: pointer;
}
.searchandfilter ul li.sf-field-category > ul > li {
  display: inline-block;
}
.searchandfilter .sf-input-radio {
  display: none;
}

This will make the search bar 100% wide:

.searchandfilter .sf-field-search label, .searchandfilter .sf-field-search input {
  width: 100%;
}

Author

Search Results

Viewing 6 results - 1 through 6 (of 6 total)