Forums Forums Search & Filter Pro Reset filters with javascript

Viewing 10 posts - 11 through 20 (of 27 total)
  • 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

    Anonymous
    #239177
    This reply has been marked as private.
    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

    Anonymous
    #239182

    Thanks a lot Ross !

    Yes, I think it does. I’m gonna try that ๐Ÿ™‚

    Regards,

    David

    Anonymous
    #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

    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

    Anonymous
    #239246

    Hi Ross,

    it’s the best description of my issue I could ever imagine, yes ๐Ÿ™‚

    Thanks a lot,

    David

    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 ๐Ÿ™‚

    Anonymous
    #239323
    This reply has been marked as private.
    Ross Moderator
    #239332
    This reply has been marked as private.
Viewing 10 posts - 11 through 20 (of 27 total)