Reset filters with javascript

Ross Moderator

#239175

Hi David

Ok, lets take this back a step, maybe the approach is not quite right – it will help if I actually know what it is specifically (apart from resetting the form) you are trying to do.

Can you show me the page you are working on, and tell me what is the functionality you are trying to achieve?

Thakns

Add New Note to this Reply

David GOURDET

#239177

This reply has been marked as private.

Add New Note to this Reply

Ross Moderator

#239180

Ahhh ok..

So what happens, when you enable Ajax with S&F (and you have “auto submit” on), the S&F form is refreshed entirely, every time the user interacts with it / makes an ajax request.

So you’ll have to grab a new copy of the radio button, once our ajax request completes.

So the logic would be:

– Create a function to init your event handlers on the search form.
– Trigger it on sf:init
– Trigger it on sf:ajaxfinish (to grab the new copies)

I hope that makes sense?

Thanks

Add New Note to this Reply

David GOURDET

#239182

Thanks a lot Ross !

Yes, I think it does. I’m gonna try that 🙂

Regards,

David

Add New Note to this Reply

David GOURDET

#239236

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

Add New Note to this Reply

Ross Moderator

#239241

Hi David

While I can read your code, I actually don’t fully understand the logic. But I’m happy to help write something, in the right direction.

Just to be clear, what I understand is:

1) You click on an area / department to reveal the search form
2) This click, also sets the invisible deparment field, to the correct radio value
3) You choose a city as now the correct cities are shown in the associated dropdown
4) The other fields work as expected

So the issue you have is, after making some selections, you then want to choose another area/department – and the problem is resetting the form, and setting the correct value on the department radio?

Thanks

Add New Note to this Reply

David GOURDET

#239246

Hi Ross,

it’s the best description of my issue I could ever imagine, yes 🙂

Thanks a lot,

David

Add New Note to this Reply

Ross Moderator

#239296

Hi David

Try this:

(function ($) {
	
	var searchForm;
	
	// this is what I'm clicking, in my test, I took over the navigation of a dev site
	// but this can be your area/department
	$('#top-menu-nav a').click(function(e){
		
		e.stopPropagation();
		e.preventDefault();
		console.log("clicked nav");
		
		// so first reset the form - passing false, means the results are not updated
		searchForm.resetForm(false);
		
		// the value to set for department you will want to get from your click event 
		var desiredValue = 'culpa-illo';
		
		// then assign the correct value to the field we want to change, in my case
		// its a tag field (which is a select/dropdown field) - selects are easier to work with
		$('.searchandfilter .sf-field-tag select').val(desiredValue);
		
		//now submit the form to update the results and search form
		$('.searchandfilter').submit();
		
	});
	
	$(document).on("sf:init", ".searchandfilter", function(e, data){
        searchForm = data.object;
		console.log("S&F init", searchForm);
	});
	
})(jQuery);

Basically, I just intercepted a click on my navigation (on some dev site) to simulate what you were doing, and then I went through the steps to setup the form.

If you want to use my code, you’ll need to do the following:

1) Change the department field to be a dropdown/select – easier than dealing with a radio button
2) replace .sf-field-tag with the class thats applied to your field (inspect the frontend markup to find it)
3) put the value of the department into desiredValue so the select is set properly

Let me know how you get on 🙂

Add New Note to this Reply

David GOURDET

#239323

This reply has been marked as private.

Add New Note to this Reply

Ross Moderator

#239332

This reply has been marked as private.

Add New Note to this Reply

[Author]

Posts